JS选项卡

上来先说说实现思路

首先 我们要做什么 ？

eg: 通过点击 让对应的页面展示出来

这里我们是否需要获取到要点击的元素呢？ 例如ul下的li, 然后要让谁展示呢? 对的，是展示内容。例如我写的div.

所以我们就需要获取到 点击 和展示 两个要操作的元素

  var tab = document.getElementsByClassName("tab")[0],
       oLis = tab.getElementsByTagName("li"),
      oDivs = tab.getElementsByTagName("div");

像这样

接下来 就是绑定事件

for(var i =0;i<oLis.length;i++){
  for (var i = 0; i < oLis.length; i++) {
     var curele = oLis[i];
       curele.i = i;
       curele.onclick = function () {
           //清空其他样式
           for (var i = 0; i < oLis.length; i++) {
            oLis[i].className = "";
            oDivs[i].className = "";
      }
          // 重写样式
           this.className = "on";
           oDivs[this.i].className = "show";
     }
}

在这里我们用循环来给每一个li都绑上对应的点击事件 你也可以换成 onmouseover 鼠标移入事件。

事件里面就是我们要改动的地方了 在这里我是通过改动样式(类名),只有拥有show和on的才会被展示出来。

效果如下

然后是代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab ul {
            float: left;
        }

        .tab ul li {
            color: #000000;
            width: 50px;


        }

        .tab div {
            width: 500px;
            height: 500px;
            background-color: aqua;

            display: none;
        }

        .on {
            display: block;
            background-color: brown;

        }

        .tab .show {
            display: block;
            float: left;
        }
    </style>
</head>

<body>
    <div class="tab">
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

<script>
    var tab = document.getElementsByClassName("tab")[0],
        oLis = tab.getElementsByTagName("li"),
        oDivs = tab.getElementsByTagName("div");
   //检查是否拿到了
    console.log(oLis);//类数组
    console.log(oDivs);//类数组

    for (var i = 0; i < oLis.length; i++) {
        var curele = oLis[i];
        curele.i = i;
        curele.onclick = function () {
            //清空其他样式
            for (var i = 0; i < oLis.length; i++) {
                oLis[i].className = "";
                oDivs[i].className = "";
            }
            // 重写样式
            this.className = "on";
            oDivs[this.i].className = "show";

        }
    }
   

</script>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容