使用DOM实现tab操作

最新推荐文章于 2024-03-07 20:34:46 发布

王贰拾888

最新推荐文章于 2024-03-07 20:34:46 发布

阅读量539

点赞数

CC 4.0 BY-SA版权

分类专栏：个人心得

本文链接：https://blog.youkuaiyun.com/wangwenkai76/article/details/82846772

个人心得专栏收录该内容

26 篇文章

订阅专栏

使用DOM操作，实现tab的对应切换效果

可以看到，在tab切换的时候，下边的文本也是跟着切换的

（style有点low，css样式有兴趣的话可以后边追加一下）

这里我是使用DOM追加的点击事件，并且在点击事件里边给节点添加了属性、序号，从而实现了tab和文本同步切换的效果

这里贴一下代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab案例实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        span{
            width: 48px;
            height: 28px;
            display: inline-block;
            background-color: red;
            border: 1px solid red;
            cursor: pointer;
        }
        ul li{
            list-style: none;
            height: 98px;
            width: 198px;
            background-color: yellow;
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
            display: none;/*默认的li样式是隐藏的，只有在触发了点击事件以后，才会切换样式*/
        }
        span.current{
            background-color: yellow;
            border: 1px solid yellow;
        }
        li.current{
            /*让特定的li显示出来的样式*/
            display: block;
        }
    </style>
</head>
<body>
<div id="dv1">
    <div id="dv2">
        <!--因为span是文本标签，为了不必要的麻烦，就将span之间的空隙删除掉-->
        <span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span>
    </div>
    <div id="dv3">
        <ul>
            <li class="current">我是体育模块</li>
            <li>我是娱乐模块</li>
            <li>我是新闻模块</li>
            <li>我是综合模块</li>
        </ul>
    </div>
</div>
<script>
    //获取div元素
    var obj = document.getElementById("dv1");
    //获取里边的第一个div
    var objDiv1 = obj.getElementsByTagName("div")[0];
    //获取里边的第二个div
    var objDiv2 = obj.getElementsByTagName("div")[1];
    //获取spans标签
    var spans = objDiv1.getElementsByTagName("span");
    //获取li标签
    var list = objDiv2.getElementsByTagName("li");

    //遍历span，为span注册点击事件
    for (var i = 0; i<spans.length; i++){
        //为span设置一个名字为"score"的属性，里边存着它的序号
        spans[i].setAttribute("score",i);
        //消除原来span的样式,并且给span注册点击事件
        spans[i].onclick = function () {
          for (var j = 0; j<spans.length; j++){
              spans[j].removeAttribute("class");
          }
          this.className = "current";
            //设置一个定位，用来对应li的查找
            //在num里边给一个被电击span的序号
          var num = this.getAttribute("score");

            //遍历 li，消除li的样式
          for (var k = 0; k<list.length; k++){
                list[k].removeAttribute("class");
            }
            //这里将上边定位得到的num(也就是被点击span的序号拿过来)
            //在对应序号的list上边，改变list的样式
            list[num].className = "current";
        };
    }


</script>

</body>
</html>

很多细节在代码里边注释的很详细。

这个案列不仅可以加深我们对于DOM操作的理解，而且还学习到了一些新的方式来创建元素的属性以及删除，更改元素的属性值，还有这个定位的思想，可以帮助我们在以后的案列中可以更好的分析问题。