jQuery实现tab标签切换功能

转载自：https://blog.csdn.net/qq_36526512/article/details/80902914

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实现标签页切换 </title>
    
    <style>
        .box{
            width: 215px;
            height: 150px;
        }
        .tab{
            width: 215px;
            height: 50px;
        }    
        span{
            float: left;
            height: 50px;
            padding: 0 30px;
            border: 1px solid #333333;
            text-align: center;
            cursor: pointer;
        }
        .content div{
            height: 100px;
            width: 212px;
            border: 1px solid #333333;
        }
        .tab_active{
            background-color: #FF0000;
        }
        .show{
            background-color: #c9c9c9;
            display: block;
        }
        </style>
   <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
    <div class="box">
        <div class="tab">
            <span class="tab_active">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div class="content">
            <div class="show">content1</div>
            <div class="show" style="display: none;">content2</div>
            <div class="show" style="display: none;">content3</div>
        </div>
    </div>

<script>
    /*
//jquery
       $(function(){
           //点击切换
           $('span').click(function(){
               $(this).addClass('tab_active').siblings().removeClass('tab_active');
               var i = $(this).index();
               $('.content div').eq(i).css('display','block').addClass('show').siblings().css('display','none');
           });

          //鼠标经过标签页切换
          $('span').mouseover(function(){
               $(this).addClass('tab_active').siblings().removeClass('tab_active');
               var i = $(this).index();
               $('.content div').eq(i).css('display','block').addClass('show').siblings().css('display','none');
           });
       });

*/

//JavaScript
var tabs = document.getElementsByTagName('span');
    var contents = document.getElementsByClassName('content')[0];
    var aaa= contents.getElementsByTagName('div');
    for(var i = 0, len1 =tabs.length; i<len1; i++){
        tabs[i].index = i;
        tabs[i].onclick = function(){
            for(var j = 0; j < tabs.length; j++){
                tabs[j].className = "";
                aaa[j].style.display = "none";
            }
            tabs[this.index].className = "tab_active";
            aaa[this.index].style.display = "block";
        }
    }


</script>

</body>
</html>

JavaScript中第二行获取ClassName时得到的是一个list，无论拥有这个class的元素是一个还是多个，均会是一个list，而在接下来获取contents的子元素时，js不知道获取的list中的哪个，所以需要在获取到classname为“content”的元素时加了[0]。所以最好使用id来标记元素，那样不需考虑获取的元素是不是list。

jQuery在使用中能极大的减少代码量，但是需要理解var i = $(this).index();这句代码，它的作用是获取被点击的标签的索引值，这个索引值先保存到i中，在之后的显示标签时，能确定相对应的内容。

在content中，如果每个div的状态样式都是一样的，就可以设为同样的class，不需再js或jQuery中单独设置它。

原文链接：https://blog.csdn.net/qq_36526512/java/article/details/80902914

效果图：

posted @ 2020-04-10 18:54  YorkShare  阅读(596)  评论(0)  编辑  收藏  举报