JS底层书写的简单Tab切换！

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

小猫爱摸鱼

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

阅读量194

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/wsh20210301/article/details/116427163

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML和CSS实现商品详情页的Tab切换效果。通过分析某宝网的商品详情页，设计了包含头部导航栏和底部内容区域的布局。关键步骤包括设置导航栏li元素的点击事件，利用索引值匹配底部内容的显示。在点击不同的li时，通过排他思想改变背景颜色并显示对应的内容。提供的参考代码实现了这一功能，总结中强调了排他思想和索引值在实现头部与尾部对应中的重要性。

摘要由CSDN通过智能技术生成

Tab切换

1.题目

参照某宝网一个商品详情页，写出tab切换的功能，样式不限，实现功能即可（对dom元素操作）

2.写法与思路

（1）、对给到的要求我们首先去某宝网看一下效果图，可以清晰的发现，大的布局是用三个盒子形成的，整体一个大的盒子里面拥有头部和尾部，头部里面导航栏用ul和li来写的，尾部是用写有简单样式的盒子写的；
（2）、当点击头部导航栏目的某一个li标签的时候，其他li的样式不改变，当前的li的背影颜色变为设置的颜色，就是改变每一个li的背景颜色（排他思想）；
（3）、尾部盒子样式写好后，设置与头部里面对应li的数量一致的盒子个数，并且点击头部li时只出现一个底部盒子，那就要用底部父级盒子溢出隐藏；
（4）、关键的一步：当点击头部导航栏目的某一个li标签的时候，尾部里面的盒子随之变化，实现与之对应内容的变化，这就要思考一下如何让他们二者之间相对于起来？
（5）、解决方法：给头部li标签设置一个索引值并且获取当前点击的li元素的索引值，由于底部盒子的数量与头部li的数量保持一致，这就可以利用索引值的方式将二者联系起来。

3.实现功能图

在这里插入图片描述

4.参考代码

<!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>
        *{
            margin: 0px;
            padding: 0px;
        }
        .father{
            width: 500px;
            height: 250px;
            margin: 100px auto;
            /* border: 1px solid blue; */
        }
        ul{
            width: 100%;
            height: 50px;
            /* border: 1px solid red; */
            background-color: peru;
        }
        li{
          list-style: none;
          width: 100px;
          height: 50px;
          /* border: 1px solid blue;   */
          float: left;
          text-align: center;
          line-height: 50px;
          font-weight: 900;
          font-size: 14px;
          color: white;
        }
        .active{
            background-color: olivedrab;
        }
        .father .bot{
            width: 500px;
            height: 200px;
            /* border: 1px solid black; */

        }
        .bot>div{
            width: 100%;
            height: 100%;
            text-align: center;
            font-weight: 900;
            font-size: 40px;
            line-height: 200px;
            background-color:peru;
            /* 现将写好的div样式隐藏起来 */
            display: none;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="father">
        <ul class="top">
            <li class="item active">电脑</li>
            <li class="item">手机</li>
            <li class="item">X-box</li>
            <li class="item">数码相机</li>
            <li class="item">电视</li>
        </ul>
        <!-- 内容 -->
        <div class="bot">
            <div class="son" style="display: block;">iMAC</div>
            <div class="son">iPhone13</div>
            <div class="son">X-box</div>
            <div class="son">索尼AX800</div>
            <div class="son">小米电视</div>
        </div>
    </div>
   <script>
       var ul=document.querySelector(".top");
       var li=ul.querySelectorAll("li")
       var son=document.querySelectorAll(".son")
    //    console.log(li);
       //遍历一下所有的li
       for(var i=0;i<li.length;i++){
        //    给每一个li编一个编号便于与下面的内容盒子相对应
           li[i].setAttribute("index",i)
           li[i].onclick=function(){
            //排他思想
            for(var i=0;i<li.length;i++){
                li[i].className="";
            }
            this.className="item active";
            // 获取当前点击的元素的index值
            var index=this.getAttribute("index")
            // console.log(index);
            // 排除所有的son的样式
            for(var i=0;i<son.length;i++){
                son[i].style.display="none"
            }
            // 给当前对应的index值的display设置打开
            son[index].style="display:block"
           }
       }
   </script>
</body>
</html>