js之tab选项卡以及排思想

排它思想

选中一个排除其他的

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .active{
 8             background-color: blue;
 9         }
10         #aaa{
11             width: 50px;
12             height: 70px;
13             background-color: red;
14             position: absolute;
15             top: 30px;
16             display: none;
17 
18         }
19 
20         #box{
21             width: 50px;
22             height: 30px;
23             background-color: blue;
24             position: relative;
25         }
26     </style>
27 </head>
28 <body>
29     <button>按钮1</button>
30     <button>按钮2</button>
31     <button>按钮3</button>
32     <button>按钮4</button>
33     <button>按钮5</button>
34 
35     <div id="box">
36         哈哈哈<div id="aaa"></div>
37     </div>
38 
39 
40     <script>
41         var oBtns = document.getElementsByTagName("button");
42         for (var i = 0; i < oBtns.length; i++) {
43             oBtns[i].onclick = function () {
44                 for (var j = 0; j < oBtns.length; j++) {
45                     oBtns[j].className = '';
46                 }
47                 this.className = 'active';
48             }
49         }
50 
51         document.getElementById('box').onmouseenter = function () {
52             this.children[0].style.display = 'block';
53         };
54 
55         document.getElementById('box').onmouseleave = function () {
56             this.children[0].style.display = 'none';
57         };
58 
59     </script>
60 </body>
61 </html>

tab选项卡

选中当前对应的标签显示该标签下方对应显示的内容

实现思想：

　　选中当前的标签时候，记录当前标签的下标，对应下方的标签就可以根据下标值获取内容

　　这里边遇到一个变量提升的坑

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #tab{
            width: 480px;
            margin: 20px auto;
            border: 1px solid red;
        }
        ul{
            width: 100%;
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #cccccc;
        }

        ul li a{
            text-decoration: none;
            color:black;
        }
        li.active{
            background-color: red;
        }
        p{
            display: none;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: red;
        }
        p.active{
            display: block;

        }

    </style>
</head>
<body>
<div id="tab">
    <ul>
        <li class="active">
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">新闻</a>
        </li>
        <li>
            <a href="#">图片</a>
        </li>
    </ul>
    <p class="active">首页内容</p>
    <p>新闻内容</p>
    <p>图片内容</p>
</div>
    <script type="text/javascript">
        //es5
        /*
        var oLis = document.getElementsByTagName("li");
        var oPs = document.getElementsByTagName("p");
        var i; // 变量提升
        for (i=0; i<oLis.length; i++){
            oLis[i].index = i;

            oLis[i].onclick = function () {
                for (var j=0; j<oLis.length; j++) {
                    oLis[j].className = '';
                    oPs[j].className = '';
                }
                this.className = 'active';
                oPs[this.index].className = 'active';
            }
        }
         */

        // es6
        let oLis = document.getElementsByTagName("li");
        let oPs = document.getElementsByTagName("p");
        for (let i=0; i<oLis.length; i++){
            oLis[i].index = i;

            oLis[i].onclick = function () {
                for (let j=0; j<oLis.length; j++) {
                    oLis[j].className = '';
                    oPs[j].className = '';
                }
                this.className = 'active';
                oPs[this.index].className = 'active';
            }
        }

    </script>
</body>

</html>

来源：https://www.cnblogs.com/Alexephor/p/11342843.html

标签

选项卡

getelementsbytagname