tab切换

最新推荐文章于 2021-01-27 06:18:03 发布

honkaiimpac

最新推荐文章于 2021-01-27 06:18:03 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/Mei12656276/article/details/86182517

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 400px;
            height: 400px;;
            margin: 100px auto;
        }

        .box .header span {
            width: 96px;
            height: 45px;
            line-height: 45px;
            display: inline-block;
            text-align: center;
            cursor: pointer;
            background-color: red;
        }

        .header span.selected {
            background-color: cyan;
        }

        .content li {
            list-style: none;
            height: 250px;
            background-color: gold;
            display: none;
        }

        .content li.select {
            display: block;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="header">
        <span class="selected">体育</span>
        <span>娱乐</span>
        <span>新闻</span>
        <span>综合</span>
    </div>
    <div class="content">
        <ul>
            <li class="select">我是体育</li>
            <li>我是娱乐</li>
            <li>我是新闻</li>
            <li>我是综合</li>
        </ul>
    </div>
</div>
<script src="../api%201.8/common.js"></script>
<script>
    var list=document.getElementsByTagName("li");
    var spans =document.getElementsByTagName("span");
    for (var i=0;i<spans.length;i++) {
        //点击前把所有值保存到span中
        spans[i].setAttribute("index", i);
        spans[i].onclick = function () {
            //把所有的span的样式全部移除
            for (var j = 0; j < spans.length; j++) {
                spans[j].removeAttribute("class")
            }

            //让当前的被点击的span添加样式
            this.className = "selected";
            //获取span的索引值
            var num = this.getAttribute("index");
            //隐藏所有li
            for (var k=0;k<list.length;k++){
                list[k].removeAttribute("class")
            }
            //让当前被点击的span对应的li显示
            list[num].className="select";
        }

    }



</script>
</body>
</html>

honkaiimpac

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab切换

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { margin: 0;
复制链接

扫一扫