分类
前端

JavaScript实现tab切换

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

        .box {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            padding-top: 50px;
        }

        .box.hd {
            width: 400px;
            height: 50px;
        }

        .hd span {
            background-color: blue;
            width: 100px;
            line-height: 50px;
            text-align: center;
            display: block;
            float: left;
            color: #fff;
        }

        .hd span.current {
            background-color: red;
        }

        .bd ul {
            width: 400px;
            height: 350px;
            border: 1px solid blue;
            box-sizing: border-box;
        }

        .bd li {
            list-style: none;
            display: none;
        }

        .bd li.current {
            display: block;
        }

        .bd li p {
            text-align: center;
            line-height: 200px;
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
<div class="box" id="news">
    <div class="hd">
        <span>体育</span>
        <span>娱乐</span>
        <span>新闻</span>
        <span>综合</span>
    </div>
    <div class="bd">
        <ul>
            <li class="current">
                <p>我是体育模块</p>
            </li>
            <li>
                <p>我是娱乐模块</p>
            </li>
            <li>
                <p>我是新闻模块</p>
            </li>
            <li>
                <p>我是综合模块</p>
            </li>
        </ul>
    </div>
</div>
<script src="common.js"></script>
<script>
    //定义变量获取hd,bd 和span列表和li列表
    var hd = my$("news").getElementsByClassName("hd")[0];
    var bd = my$("news").getElementsByClassName("bd")[0];
    var spanList = hd.getElementsByTagName("span");
    var liList = bd.getElementsByTagName("li");
    //循环遍历li标签
    for (var i = 0; i < spanList.length; i++) {
        //给每个span标签加一个index属性
        spanList[i].setAttribute("index", i);
        //定义鼠标经过效果
        spanList[i].onmouseover = function () {
            for (var j = 0; j < spanList.length; j++) {
                //所有的span删除class属性
                spanList[j].removeAttribute("class");
            }
            //当前的span增加current属性
            this.setAttribute("class", "current");
            //获取index属性
            var index = this.getAttribute("index");
            for (var k = 0; k < liList.length; k++) {
                //循环遍历li标签,删除class属性
                liList[k].removeAttribute("class");
            }
            //当前的li标签增加current属性
            liList[index].setAttribute("class", "current");
        }
    }
</script>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注