码迷,mamicode.com
首页 > 其他好文 > 详细

tab 栏切换

时间:2020-07-30 14:23:50      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:red   sele   bottom   margin   tle   order   document   this   思想   

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 80px;
            height: 30px;
            background-color: #ccc;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            margin-bottom: 20px;
        }
        
        #box div {
            display: none;
            width: 300px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            border: 1px solid #ccc;
        }
        
        span.bg {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    <div id="box">
        <!-- /*初始化样式 bg*/ -->
        <span class="bg">html</span>
        <span>css</span>
        <span>
            JS
        </span>
        <div style="display: block;">HTML</div>
        <div>CSS</div>
        <div>JS</div>
    </div>
    <script>
        var spans = document.querySelectorAll(‘span‘);
        var divs = document.querySelectorAll(‘#box div‘);
        for (var i = 0; i < spans.length; i++) {
            spans[i].index = i;
            //点击之后的排他思想
            spans[i].onclick = function() {
                for (var i = 0; i < spans.length; i++) {
                    spans[i].className = ‘‘;
                    divs[i].style.display = ‘none‘;
                }
                this.className = ‘bg‘;
                divs[this.index].style.display = ‘block‘;
            }
        }
    </script>
</body>

</html>

tab 栏切换

标签:red   sele   bottom   margin   tle   order   document   this   思想   

原文地址:https://www.cnblogs.com/ximenchuifa/p/13403086.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!