jquery同一页面tab栏多次调用

最新推荐文章于 2022-11-10 15:02:10 发布

原创最新推荐文章于 2022-11-10 15:02:10 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#tab #多个tab #jQuery

jquery同一页面tab栏多次调用

1.jQuery写法

在一个页面中引入多个tab的例子很常见，除了使用别人写好的插件和一些成熟的框架，想在同一页面对tab多次调用。几行代码就实现了jQuery封装的多tab切换效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装多个tab栏</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;}	
.b-box {border:1px solid #d8dbe5;width: 250px;height:260px;float: left;margin-left: 100px;}
.b-box .b-top{width:100%;height:10%;background-color:#FFF;}
.b-box .b-bottom {width: 100%;height:90%;}
.b-box .b-ul{list-style: none;background-color:#FFF;width: 100%;}
.b-box .b-bottom li{width:100%; background-color: #FFF;display: none;height: 100%;}	
.b-box .b-top button{color:#666;outline:none;border:0;float:left;height:100%;width:25%;}	
.b-box .b-top .b-color {background-color:#FFF;}
.b-box .b-bottom .b-show{display: block;}
</style>
<!-- jquery写法 -->
   <script type="text/javascript">
        $(function(){
            function tab(obj){
                $("#"+obj).find("button").on('mouseenter',function(){
                    $(this).toggleClass("b-color").siblings().removeClass("b-color");
                    $("#"+obj).find("li").eq($(this).index()).toggleClass("b-show").siblings().removeClass("b-show");
                });
            }
            tab("b-one");
            tab("b-two");
        })
    </script>
</head>
<body>
<div class="b-box" id="b-one">
    <div class="b-top">
        <button class="b-color">头条</button>
        <button>社会</button>
        <button>娱乐</button>
        <button>军情</button>
     
    </div>
    <div class="b-bottom" >
      <ul class="b-ul">
            <li class="b-show">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
      </ul>
    </div>
</div>
<div class="b-box" id="b-two">
    <div class="b-top">
        <button class="b-color">头条</button>
        <button>社会</button>
        <button>娱乐</button>
        <button>军情</button>
     
    </div>
    <div class="b-bottom" >
      <ul class="b-ul">
            <li class="b-show">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
      </ul>
    </div>
</div>
</body>
</html>

2、JS写法

jQuery虽然是对前端程序员的福利，但是原生JS会让我们更好的思考，逻辑性较强。以下代码网上很多，献上闭包版本的，（虽然也不太了解闭包）和普通版本的，作为对比。也都能实现多个tab切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装多个tab栏</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;}	
.b-box {border:1px solid #d8dbe5;width: 250px;height:260px;float: left;margin-left: 100px;}
.b-box .b-top{width:100%;height:10%;background-color:#FFF;}
.b-box .b-bottom {width: 100%;height:90%;}
.b-box .b-ul{list-style: none;background-color:#FFF;width: 100%;}
.b-box .b-bottom li{width:100%; background-color: #FFF;display: none;height: 100%;}	
.b-box .b-top button{color:#666;outline:none;border:0;float:left;height:100%;width:25%;}	
.b-box .b-top .b-color {background-color:#FFF;}
.b-box .b-bottom .b-show{display: block;}
</style>

<!--js写法 -->   
 <!-- 1.闭包用法 -->
 <script>
 
            function tab(obj) {
                var target=document.getElementById(obj);
                var btns=target.getElementsByTagName("button");
                var lis=target.getElementsByTagName("li");
                for(var i=0;i<btns.length;i++)
                {
                    var timer=null;
                    btns[i].onmouseover=function (num) {
                        return function () {//闭包用法
                            clearTimeout(timer);
                            timer=setTimeout(function () {
                                for(var j=0;j<btns.length;j++)
                                {
                                    btns[j].className="";
                                    lis[j].className="";
                                }
                                btns[num].className="b-color"; 
                                lis[num].className="b-show"; 
                            },30);
                        }
                    }(i); 
                }
            }
            tab("b-one");
            tab("b-two");
    </script> 
   <!-- 2.index用法 -->
  <script type="text/javascript">
        window.onload=function(){
            function tab(obj){
                 var target=document.getElementById(obj);
                 var btns=target.getElementsByTagName("button");
                 var lis= target.getElementsByTagName("li");
                 for(var i=0;i<btns.length;i++){
                    btns[i].index=i;//index用法
                    btns[i].onmouseover=function(){
                        for(var i=0;i<btns.length;i++){
                            btns[i].className="";
                            lis[i].className="";
                        }
                        this.className="b-color";//index用法
                        lis[this.index].className="b-show";//index用法
                    }
                 }
            }
           tab("b-one");
           tab("b-two");
        }
    </script>
</head>
<body>
<div class="b-box" id="b-one">
    <div class="b-top">
        <button class="b-color">头条</button>
        <button>社会</button>
        <button>娱乐</button>
        <button>军情</button>
     
    </div>
    <div class="b-bottom" >
      <ul class="b-ul">
            <li class="b-show">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
      </ul>
    </div>
</div>
<div class="b-box" id="b-two">
    <div class="b-top">
        <button class="b-color">头条</button>
        <button>社会</button>
        <button>娱乐</button>
        <button>军情</button>
     
    </div>
    <div class="b-bottom" >
      <ul class="b-ul">
            <li class="b-show">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
      </ul>
    </div>
</div>
</body>
</html>

经验不足，请多指教。