JavaScript及jQuery实现tab标签页切换

最新推荐文章于 2023-08-10 18:55:59 发布

Simble_ming

最新推荐文章于 2023-08-10 18:55:59 发布

阅读量3k

点赞数

文章标签： JavaScript基础

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

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <body>
    <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>
    <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');
//            });
//        });

//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中单独设置它。

Simble_ming

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript及jQuery实现tab标签页切换

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jq
复制链接

扫一扫