欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Tab选项卡通过原生JS控制显隐性

程序员文章站 2022-03-19 11:25:46
本文主要介绍Tab选项卡,通过原生JS控制显隐性 图片展示 前端代码

本文主要介绍Tab选项卡,通过原生JS控制显隐性

图片展示

Tab选项卡通过原生JS控制显隐性

前端代码
<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <link rel="stylesheet" href="style/reset.css">
    <link rel="stylesheet" href="style/js.css">
    <script type="text/javascript" src="style/js.js" charset="gb2312"></script>
    <script type="text/javascript" src="style/common.js" charset="gb2312"></script>
</head>
<body>
<p class="nav">
    <p class="nav-wrap" id="nav-li">
        <ul>
            <li class="li-check" id="x1"><span >许嵩</span></li>
            <li><span>周杰伦</span></li>
            <li><span>林俊杰</span></li>
            <li><span>陈奕迅</span></li>
        </ul>
    </p>
    <p class="nav-body nav-check">夏天</p>
    <p class="nav-body">江南</p>
    <p class="nav-body">一千年以后</p>
    <p class="nav-body">吉安娜</p>
</p>
<script>
        var c1=document.getElementById('nav-li');
        var aBtn=c1.getElementsByTagName('li');
        var c3=document.getElementsByClassName('nav-body');
        for(var i= 0;i<aBtn.length;i++)
        {
            aBtn[i].index=i;
            aBtn[i].onclick= function () {
                for(var i= 0;i<aBtn.length;i++)
                {
                    aBtn[i].className="";
                    c3[i].style.display="none"
                }
                this.className="li-check";
                c3[this.index].style.display="block";
        }
        }
</script>
</body>
</html>
.myTable{
    width: 400px;
    background: #F5F5F5;
    font-size: 14px;
    border: 1px solid #e3e4e5;
    text-align: center;
    font-weight: bold;
    margin-bottom: 150px;
}
.p-head{
    padding: 10px;
}
.con{
    height: 150px;
    text-align: left;
    padding: 10px;
}

.nav{
    width: 396px;
}
.nav-wrap:after{
    content: "";
    display: block;
    clear: both;
}
ul,li{
    float: left;
}
li{
    width: 100px;
    background: #e3e4e5;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #999;
    margin-left: -1px;
}
.nav-body{
    width: 100%;
    height: 150px;
    background: #FFF;
    border: 1px solid #999;
    margin-top: -1px;
    display: none;
    padding: 10px;
}
.li-check{
    background: #FFF;
    border-bottom: #FFF;
}
.nav-check{
    display:block ;
}
.nav-hide{
    display:none ;
}