js实现tab栏的切换

最新推荐文章于 2024-03-14 16:53:37 发布

老图拉丁

最新推荐文章于 2024-03-14 16:53:37 发布

阅读量5.8k

点赞数 5

文章标签： js

本文链接：https://blog.csdn.net/m0_55721894/article/details/118060026

版权

界面效果图如上，点击第二栏后第二栏变为红色，下面显示第二栏的内容。

html代码：如下

<header class="w">
    <ul>
        <li>商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
    </ul>
    <div class="tab_cont">
        <div class="item" style="display: block;">
            1
        </div>
        <div class="item">
            2
        </div>
        <div class="item">
            3
        </div>
        <div class="item">
            4
        </div>
        <div class="item">
            5
        </div>
    </div>
    </header>

实现点击变色效果：

1.写一个current属性，把背景颜色改为红色，字体改为白色。

.current
{
    /*背景变红*/
    background-color: red;
    /* 字体变白 */
    color: white;
}

2.要使每一个li标签点击后变色，只需要用js代码找到点击的li标签，并给对应的li标签加上current属性便可以实现变色效果。

<script>
        // 找到tab栏标题的每一项li存到tab数组中
        var tab = document.querySelector('ul').querySelectorAll('li');
        // 使用for循环给tab数组每一项设置监听
        for(var i = 0;i<tab.length;i++)
        {
            tab[i].onclick = function(){
                // 排他思想,把所有元素属性清空
                for(var j=0;j<tab.length;j++)
                    tab[j].className='';
                // 点击后把current属性加上
                this.className='current';
            }
        }
    </script>

3.排它思想：先把所有元素的属性清空，在给目前点击的元素设置对应的属性。这样可以保证点击的时候只有点击到的元素有变色效果。

点击之后下面的内容跟着变化

1.先给所有div元素设置隐藏，由于要让第一个内容模块一开始就显示，所以要给第一个内容模块先设置可见，采用行内样式直接设置。

.item
{
    display: none;
}

2.由于要让所有li元素于div元素对应起来，所以采用自定义元素给li设置一个值，在for循环内利用i来设置，之后在onclick方法内获取到对应的index属性值，setAttribute方法第一个参数是自定义属性名，第二个是自定义属性的值。

// 用js数组给items设置一个自定义属性，tab数组的每一项与之对应
tab[i].setAttribute("index",i);

3.排他思想：一旦点击li就让对应的div元素显示，其他div元素隐藏

        // 找到内容栏的每一项
        var items = document.querySelector('.tab_cont').querySelectorAll('div');
        // 使用for循环给tab数组每一项设置监听
        for(var i = 0;i<tab.length;i++)
        {
            // 用js数组给items设置一个自定义属性，tab数组的每一项与之对应
            tab[i].setAttribute("index",i);
            // 给所有按钮设置监听
            tab[i].onclick = function(){
                // 排他思想,把所有元素属性清空
                for(var j=0;j<tab.length;j++)
                    tab[j].className='';
                // 点击后把current属性加上
                this.className='current';
                var index=this.getAttribute('index');
                for(var k=0;k<items.length;k++)
                    items[k].style.display="none";
                items[index].style.display='block';
            }
        }

这样就可以实现tab栏和内容的切换了

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *
{
    margin: 0;
    padding: 0;
    border: 0;
}
body
{
    
    position: relative;
}
header
{
    background-color: aquamarine;
}
.w
{
    width: 700px;
    margin: 0 auto;
}
header>ul li
{
    padding: 5px 30px;
    height: 30px;
    display: inline-block;
    list-style: none;
}
header ul
{
    background-color: rgb(248, 248, 248);
    border-bottom:orange solid 2px;
}
.item
{
    display: none;
}
.current
{
    /*背景变红*/
    background-color: red;
    /* 字体变白 */
    color: white;
}

    </style>
</head>
<body>
    <header class="w">
    <ul>
        <li>商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
    </ul>
    <div class="tab_cont">
        <div class="item" style="display: block;">
            1
        </div>
        <div class="item">
            2
        </div>
        <div class="item">
            3
        </div>
        <div class="item">
            4
        </div>
        <div class="item">
            5
        </div>
    </div>
    </header>
    <script>
        // 找到tab栏标题的每一项存到tab数组中
        var tab = document.querySelector('ul').querySelectorAll('li');
        // 找到内容栏的每一项
        var items = document.querySelector('.tab_cont').querySelectorAll('div');
        // 使用for循环给tab数组每一项设置监听
        for(var i = 0;i<tab.length;i++)
        {
            // 用js数组给items设置一个自定义属性，tab数组的每一项与之对应
            tab[i].setAttribute("index",i);
            // 给所有按钮设置监听
            tab[i].onclick = function(){
                // 排他思想,把所有元素属性清空
                for(var j=0;j<tab.length;j++)
                    tab[j].className='';
                // 点击后把current属性加上
                this.className='current';
                // 找到目前点击的li元素的下标
                var index=this.getAttribute('index');
                // 排它思想
                for(var k=0;k<items.length;k++)
                    items[k].style.display="none";
                // 把于li元素同样下标的div元素显示
                items[index].style.display='block';
            }
        }
    </script>
</body>
</html>