使用js实现选项卡

最新推荐文章于 2022-04-22 14:55:39 发布

LMYH1123

最新推荐文章于 2022-04-22 14:55:39 发布

阅读量150

点赞数

分类专栏： js 文章标签：选项卡

本文链接：https://blog.csdn.net/lmyh1111/article/details/100616397

版权

js 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

html页面：

 <div id="box">
        <ul id="menu">
            <li class="on">AAA</li>
            <li>BBB</li>
            <li>CCC</li>
            <li>DDD</li>
        </ul>
        <div class="cut">
            <div class="current">aaa</div>
            <div>bbb</div>
            <div>ccc</div>
            <div>ddd</div>
        </div>
    </div>

css样式：

<style>
         #box {
            width: 480px;
            margin: 50px auto;
            border: 1px solid gray;
            height: 385px;
        }
        ul,li{
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        #box #menu>li{   
            float: left;
            width: 120px;
            background: #aaa;
            line-height: 35px;
            text-align: center;
        }
       #box #menu>li.on {
            background: #fff;
        }
        .cut{
            clear: both;
        }
        
        #box .cut>div {
            width: 100%;
            height: 350px;
            display: none;
            font-size: 50px;
            text-align: center;
        }
        #box .cut>div.current {
            display: block;
        }
    </style>

js代码：

<script>
        var lis = document.querySelectorAll('#menu>li');//获取li列表
        var ds = document.querySelectorAll('.cut>div');//获取div
        var cutIndex = 0; //记录被选中的菜单的索引
        //为菜单添加点击事件
        for (var i = 0, len = lis.length; i < len; i++) {
            lis[i].index = i; //为每一个li添加新属性，保存自身的位置
            lis[i].onclick = function () {
                lis[cutIndex].className = "";
                ds[cutIndex].className = '';

                this.className = 'on';
                ds[this.index].className = 'current';
                cutIndex = this.index;
            }
        }
 </script>

实现效果图：