js实现tab栏切换

javascript 专栏收录该内容
104 篇文章 0 订阅

在这里插入图片描述

<!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>
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 点我我会动 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值