js实现多tab栏切换效果（二）

最新推荐文章于 2024-07-29 18:19:14 发布

diligentkong

最新推荐文章于 2024-07-29 18:19:14 发布

阅读量4.1k

点赞数 2

分类专栏： JS实例效果文章标签： javascript

本文链接：https://blog.csdn.net/diligentkong/article/details/54730433

版权

JS实例效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上篇js实现tab栏切换效果（一）实现了tab栏的切换效果，如果实现多tab栏的切换效果的话，直接用上面的代码会有小bug。不过不用怕，给每个tab栏加一个id唯一标识的话，就没啥问题了。
废话上说，上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{list-style: none;}
            .box{
                width: 370px;
                height: 300px;
                margin: 100px auto;
                border: 1px solid #ccc;
                overflow: hidden;
            }
            .bt span{
                display: inline-block;
                width: 80px;
                height: 30px;
                background-color: pink;
                padding: 3px;
                text-align: center;
                line-height: 30px;
                cursor: pointer;
            }
            .bt span.current{
                background-color: purple;
            }
            .bc li{
                width: 100%;
                height: 270px;
                background-color: purple;
                display: none;
            }
            .bc li.show{
                display: block;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                function fun(obj){
                    // 获取每个tab栏的id
                    var target = document.getElementById(obj);
                    var spans = target.getElementsByTagName("span");
                    var lis = target.getElementsByTagName("li");
                    for (var i=0;i<spans.length;i++) {
                        spans[i].index=i;
                        spans[i].onmouseover= function(){
                            for (var j=0;j<spans.length;j++) {
                                spans[j].className="";
                                lis[j].className="";
                            }
                            this.className="current";
                            lis[this.index].className = "show";
                        }
                    }
                }
                fun("news");
                fun("fruits");
                fun("clothes");
            }
        </script>
    </head>
    <body>
        <div class="box" id="news">
            <div class="bt">
                <span class="current">新闻</span>
                <span>娱乐</span>
                <span>科技</span>
                <span>经济</span>
            </div>
            <div class="bc">
                <ul>
                    <li class="show">新闻内容</li>
                    <li>娱乐内容</li>
                    <li>科技内容</li>
                    <li>经济内容</li>
                </ul>
            </div>
        </div>
        <div class="box" id="fruits">
            <div class="bt">
                <span class="current">苹果</span>
                <span>香蕉</span>
                <span>橘子</span>
                <span>雪梨</span>
            </div>
            <div class="bc">
                <ul>
                    <li class="show">苹果酸甜</li>
                    <li>香蕉香香</li>
                    <li>橘子好棒</li>
                    <li>雪梨脆脆</li>
                </ul>
            </div>
        </div>
        <div class="box" id="clothes">
            <div class="bt">
                <span class="current">运动装</span>
                <span>休闲装</span>
                <span>礼服装</span>
                <span>乞丐装</span>
            </div>
            <div class="bc">
                <ul>
                    <li class="show">运动棒棒</li>
                    <li>正好休闲</li>
                    <li>礼服靓靓</li>
                    <li>正合心意</li>
                </ul>
            </div>
        </div>
    </body>
</html>