03-8 选项卡

选项卡.gif

选项卡，顾名思义，就是有几个按钮，对应几个界面，当切换选项按钮时，对应的界面也跟着切换

如上图，当点击哪个按钮时，哪个按钮颜色改变

js代码如下

要知道，上面点哪个按钮，下面对应的页面就要显示出来，所以，有什么方法能知道当前点击的按钮的索引时啥呢

 aLi[i].index = i;

自定义一个属性，存放当前点击按钮的索引，就会找到下面对应的Div了

下面是选项卡的全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复习4</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #contain{
            width: 400px;
            height: 400px;
            background:#D07090;
            margin: 100px auto;
        }
        #btn{
            overflow: hidden;//因为子元素浮动，脱离文档流，所以父元素没高度了，此时应该让父元素有高度
        }
        #btn li{
            width: 80px;
            height: 40px;
            background: cyan;
            float : left;
            text-align : center;
            line-height:40px;
            cursor: pointer;
        }
        #btn .selected{
            background:#00ff00;
        }
        #content div{
            width: 400px;
            height: 360px;
            background: #ffff00;
            border: 1px solid #000;
            display : none;
        }
        #content  .active{
            display:block;
        }
    </style>
</head>
<body>

    <div id="contain">
        <ul id="btn">
            <li class="selected">黄德昌</li>
            <li>刘春宇</li>
            <li>苏杭</li>
            <li>陈华柱</li>
            <li>李雪</li>
        </ul>
        <div id="content">
            <div  class="active">李雪的师父，除了长得黑，个矮，脸皮厚外其他都挺好的</div>
            <div>李雪的老铁，非常随性，放荡不羁爱自由，对朋友很够意思</div>
            <div>李雪的苏大爷，高大威武，外表高冷实则逗比一只</div>
            <div>柱哥，整天满嘴英语，英语雅思水平，能一本正经地用广东话搞笑</div>
            <div>我自己，嗯，小仙女，长得好看，心地善良，一天24小时中有12小时在吃东西</div>
        </div>
    </div>
    <script>
        var oBtn = document.getElementById("btn");
        var aLi = oBtn.getElementsByTagName("li");
        var oContent = document.getElementById("content");
        var aDiv = oContent.getElementsByTagName("div");
        for(var i = 0; i<aLi.length;i++){
            aLi[i].index = i;
            aLi[i].onclick = function(){
                for(var i = 0; i<aLi.length;i++){
                    aLi[i].className = "";
                    aDiv[i].className = "";
                }
                this.className = "selected";
                aDiv[this.index].className = "active";
            }
        }

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

选项卡，顾名思义，就是有几个按钮，对应几个界面，当切换选项按钮时，对应的界面也跟着切换

如上图，当点击哪个按钮时，哪个按钮颜色改变

js代码如下

要知道，上面点哪个按钮，下面对应的页面就要显示出来，所以，有什么方法能知道当前点击的按钮的索引时啥呢

自定义一个属性，存放当前点击按钮的索引，就会找到下面对应的Div了

猜你喜欢