js实现tab栏切换

最新推荐文章于 2024-12-03 20:19:55 发布

黄大仙No.1

最新推荐文章于 2024-12-03 20:19:55 发布

阅读量487

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107815639

javascript 专栏收录该内容

104 篇文章

订阅专栏

本文展示了一个使用HTML和JavaScript实现的Tab栏切换效果。通过为每个Tab设置对应的隐藏内容区块，当用户点击不同的Tab时，可以显示相应的内容并隐藏其他内容。此示例包括商品介绍、规格与包装、售后保障、商品评价和手机社区五个Tab。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
    <style>
        .tab {
            position: absolute;
            border: 1px solid #555555;
            /*width: 650px;*/
            /*height: auto;*/
        }
        .tab_list {
            /*float: left;*/
            /*position: absolute;*/
            height: 70px;
            width: 650px;
            /*position: relative;*/
            padding: 0 0 0;
            border: solid #cccccc;
            margin: 0 auto;
            /*cursor: pointer;*/
            /*text-align: center;*/
            /*float: left;*/
        }
        .tab_list li{
            border: #555555 solid;
            list-style: none;
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #e64942;
            color: #cccccc;
        }

        .tab_con{
            /*float: ;*/
            /*padding-top: 50px;*/
            margin: 30px;
        }
        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block">
                商品介绍#########################
            </div>
            <div class="item">
                规格与包装#######################
            </div>
            <div class="item">
                售后保障#########################
            </div>
            <div class="item">
                商品评价************************
                &nbsp;&napprox;<br>******************
                *****************
            </div>
            <div class="item">
                手机社区#########################
            </div>
        </div>
    </div>
<script>
    var lis=document.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='';
                items[i].style.display='none';
            }
            this.className='current';
            var index=this.getAttribute('index');
            console.log(index);
            items[index].style.display='block';
        }
    }
</script>
</body>
</html>