JS制作tab栏实现来回切换

在这里插入图片描述
简单版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box{
            width:500px;
            height: 400px;
            border:1px solid #cccccc;
            margin: 100px auto;
            overflow: hidden;
        }
        ul{
            width:600px;
            height:40px;
            margin-left: -1px;
            list-style: none;
        }
        li{
            width:101px;
            height:40px;
            float: left;
            text-align: center;
            font:700 15px/40px "微软雅黑";
            background-color: pink;
            cursor: pointer;
        }
        span{
            display: none;
            width: 500px;
            height: 360px;
            background-color: cornflowerblue;
            text-align: center;
            font:700 150px/360px "微软雅黑";
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
        .current{
            background-color: cornflowerblue;
        }
    </style>
    <script>
        //鼠标放到上面变色，span也显示出来
        window.function () {
            var liArr=document.getElementsByTagName("li");
            var spanArr=document.getElementsByTagName("span");
            for(var i=0;i<liArr.length;i++){
                liArr[i].index=i;
                liArr[i].function () {
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].className="";
                        spanArr[j].className="";
                    }
                    this.className="current";
                    spanArr[this.index].className="show";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
    </ul>
    <span class="show">鞋子</span>
    <span>袜子</span>
    <span>帽子</span>
    <span>裤子</span>
    <span>裙子</span>
</div>
</body>
</html>

复杂版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box{
            width:500px;
            height: 400px;
            border:1px solid #cccccc;
            margin: 100px auto;
            overflow: hidden;
        }
        ul{
            width:600px;
            height:40px;
            margin-left: -1px;
            list-style: none;
        }
        li{
            width:101px;
            height:40px;
            float: left;
            text-align: center;
            font:700 15px/40px "微软雅黑";
            background-color: pink;
            cursor: pointer;
        }
        span{
            display: none;
            width: 500px;
            height: 360px;
            background-color: cornflowerblue;
            text-align: center;
            font:700 150px/360px "微软雅黑";
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
        .current{
            background-color: cornflowerblue;
        }
    </style>
    <script>
        //鼠标放到上面变色，span也显示出来
        window.function () {
            var liArr=document.getElementsByTagName("li");
            var spanArr=document.getElementsByTagName("span");
            for(var i=0;i<liArr.length;i++){
                liArr[i].setAttribute("index",i);
                liArr[i].function () {
                    for(var j=0;j<liArr.length;j++){
                        liArr[j].removeAttribute("class");
                        spanArr[j].removeAttribute("class");
                    }
                    this.setAttribute("class","current");
                    spanArr[this.getAttribute("index")].setAttribute("class","show");
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li class="current">鞋子</li>
        <li>袜子</li>
        <li>帽子</li>
        <li>裤子</li>
        <li>裙子</li>
    </ul>
    <span class="show">鞋子</span>
    <span>袜子</span>
    <span>帽子</span>
    <span>裤子</span>
    <span>裙子</span>
</div>
</body>
</html>

JS制作tab栏实现来回切换

猜你喜欢