当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Tab选项卡通过原生JS控制显隐性

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

2017年12月23日  | 移动技术网IT编程  | 我要评论

本文主要介绍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 ;
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网