JS tab栏切换

一夕ξ

已于 2022-03-17 22:23:57 修改

阅读量3k

点赞数 4

分类专栏：前端学习文章标签： javascript 开发语言 ecmascript

于 2022-02-22 21:40:45 首次发布

本文链接：https://blog.csdn.net/qq_45387575/article/details/123067123

版权

前端学习专栏收录该内容

77 篇文章 7 订阅

订阅专栏

当鼠标点击上面的选项卡（tab），下面的内容就会跟随变化

1、Tab栏切换有2个大的模块

2、上面的模块选项卡，点击某一个，当这个底色会是红色，其余不变（使用排他思想）修改类名的方式

    <script>
        var li = document.querySelectorAll('li')
        for (var i = 0; i < li.length; i++) {
            li[i].onclick = function() {
                //先清除所有的效果
                for (var i = 0; i < li.length; i++) {
                    li[i].className = ''
                }
                //给自己赋值属性，一定要用this
                this.className = 'tab_list current'
            }
        }
    </script>
    </script>
    <style>
        .tab_list li {
            list-style: none;
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer
        }
        
        .tab_list .current {
            background-color: red;
            color: white
        }
        
        .lis {
            background-color: white;
            color: black
        }
        
        .item_info {
            padding: 20px 0 0 20px
        }
        
        .item {
            display: none
        }
    </style>

可以实现第二点。

3、下面模块的内容，会随着上面的选项卡变化，所以下面模块变化写到点击事件中

4、规律：下面的模块显示内容和上面选项卡--对应，相匹配

给五个li分别自定义一个索引号属性。

5、核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号

6、当迪点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab_list li {
            list-style: none;
            height: 39px;
            float: left;
            line-height: 39px;
            cursor: pointer;
            padding: 0 20px;
            /* 不加的话会继承父级的属性变成margin ：10px auto */
            margin: 0 auto
        }
        
        .tab_list {
            background-color: rgb(202, 198, 198);
            margin: 10px auto;
            text-align: center;
            height: 39px;
            text-align: center;
        }
        
        .tab_list .current {
            background-color: red;
            color: white
        }
        
        .item_info {
            padding: 20px 0 0 20px
        }
        
        .item {
            display: none
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>

            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display:block">商品介绍模块内容</div>
            <div class="item">规格与包装模块内容</div>
            <div class="item">售后与保障模块内容</div>
            <div class="item">商品评价内容</div>
            <div class="item">手机社区内容</div>
        </div>
    </div>
    <script>
        var li = document.querySelectorAll('li')
        var item = document.querySelectorAll('.item')
        for (var i = 0; i < li.length; i++) { //这里形成一个闭包，最后i只能拿到最后面的值
            //一下给index属性进行设置
            li[i].setAttribute('index', i)
            li[i].onclick = function() { //点击一次，内部小循环运行一次,
                //先清除所有的效果
                for (var i = 0; i < li.length; i++) {//这里也可以用i，因为两者的作用域不同，一个是for循环的，一个是函数内部的，
                    li[i].className = ''
                        //注意display的书写
                    item[i].style.display = 'none'
                }
                //给自己赋值属性，一定要用this
                this.className = 'tab_list current'
                    //事件点击后，获得自定义属性的索引号,这个索引号和下面盒子是一一对应的
                item[this.getAttribute('index')].style.display = 'block' //这里不能用item[i]，因为最后i是一个4，最后i只能拿到最后面的值
            //一下给index属性进行设置
            }
        }

        //难点在此
    </script>
</body>

</html>

jQuery里面的排他思想：

        button {
            background-color: red;
        }
 <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
  $(function() {
  $('button').click(function() {
                $('button').css('background-color', 'red')
                $(this).css('background-color', 'pink')
            })
        })

原理都是一样的，先复原全部，再设置当前

jQuery实现tab栏切换：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            position: relative;
        }
        
        .nav {
            width: 500px;
            height: 40px;
            background-color: grey;
            position: absolute;
            top: 0px;
            padding-top: 0px;
        }
        
        .nav ul {
            margin-top: 0px;
        }
        
        .nav li a {
            color: black;
            text-decoration: none;
            display: inline-block;
            height: 40px;
            width: 80px;
            line-height: 40px;
        }
        
        .nav li {
            width: 90px;
            list-style: none;
            float: left;
            text-align: center;
            margin-top: 0px;
            padding-top: 0px;
        }
        
        .bgc {
            background-color: red;
        }
        
        .neir {
            padding-top: 0px;
            height: 260px;
            width: 500px;
            position: absolute;
            top: 40px;
        }
        
        .bod0,
        .bod1,
        .bod2,
        .bod3,
        .bod4 {
            display: none;
            height: 260px;
            width: 500px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="box">
        <div class="nav">
            <ul>
                <li>
                    <a href="javascript:;">商品介绍</a>
                </li>
                <li>
                    <a href="javascript:;">规格与包装</a>
                </li>
                <li>
                    <a href="javascript:;">售后保障</a>
                </li>
                <li>
                    <a href="javascript:;">商品评价</a>
                </li>
                <li>
                    <a href="javascript:;">手机社区</a>
                </li>
            </ul>
        </div>
        <div class="neir">
            <div class="bod0">商品介绍内容</div>
            <div class="bod1">规格与包装模块</div>
            <div class="bod2">售后保障内容介绍</div>
            <div class="bod3">商品评价内容</div>
            <div class="bod4">手机社区内容</div>
        </div>
    </div>
    <script>
        //jquery入口函数
        $(function() {
            //点击某个a，这个li(他的父亲）的背景色或者就添加一个类，并且把他父亲的兄弟类给移除
            $('.nav li a').click(function() {
                $(this).parent().addClass('bgc')
                $(this).parent().siblings().removeClass('bgc')
                    //点击这个a，相应的bod介绍项目显示，需要索引号(这个索引号应该用的是li的)
                var index = $(this).parent().index()
                console.log(index)
                    //根据这个索引号使，内容里面相应的div显示
                $('.neir>div').eq(index).show()
                    //排他思想，他的兄弟都要隐藏
                $('.neir>div').eq(index).siblings().hide()
            })
        })
    </script>
</body>

</html>