tab导航栏切换

Rock.Yao

已于 2022-03-31 14:20:02 修改

阅读量128

点赞数

分类专栏：笔记文章标签： css html javascript

于 2022-03-31 14:19:01 首次发布

本文链接：https://blog.csdn.net/CSDNhaoheng/article/details/123871013

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="bg">首页</li>
                <li>中外论文</li>
                <li>情报中心</li>
                <li>巧克力</li>
            </ul>
        </div>
        <div class="content">
            <div class="item" style="display: block;">
                首页
            </div>
            <div class="item">中外论文</div>
            <div class="item">情报中心</div>
            <div class="item">巧克力</div>
        </div>
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
}

.tab_list ul {
    list-style: none;
    display: flex;
    border-bottom: 2px solid #eee;
}

.tab_list ul li {
    padding: 10px 20px;
}

.item {
    display: none;
}

.bg {
    background: #232dee;
    color: #fff;
}

var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item')
for (var i = 0; i < lis.length; i++) {
    // 设置索引号
    lis[i].setAttribute('index', i);
    lis[i].onclick = function() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        this.className = 'bg'; //点击显示背景颜色
        // 获取索引号
        var index = this.getAttribute('index');
        // console.log(index);
        for (var i = 0; i < items.length; i++) {
            items[i].style.display = 'none';
        }
        items[index].style.display = 'block';
    }
}

Rock.Yao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab导航栏切换

HTML<body> <div class="tab"> <div class="tab_list"> <ul> <li class="bg">首页</li> <li>中外论文</li> <li>情报中心</li>
复制链接

扫一扫