打赏

js实现tab切换

1、效果图

2、HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单js实现tab切换</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
*{
margin:0;padding:0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
   box-sizing: border-box;
}
    a
    {
        display:block;
        text-decoration:none;
        width:90px;
    }
.container{
margin:0 auto;
width:500px;
overflow:hidden;
background:beige;
}
li{
border-top:1px solid lightgrey;
border-left:1px solid lightgrey;
border-right:1px solid lightgrey;
height:35px;
line-height:35px;
list-style:none;
text-align:center;
width:100px;
}
li:last-child{
height:159px;border-right:1px solid lightgrey;
border-bottom:1px solid lightgrey;
}
li.active {
border-right:1px solid white;background:white;
}
li.normal {
border-right:1px solid white;background:red;
}
#tab_content{
float:right;
width:400px;
*width:394px;
background:white;
height:300px;
overflow:hidden;
border-top:1px solid lightgrey;
border-right:1px solid lightgrey;
border-bottom:1px solid lightgrey;
border-left:0px solid lightgrey;
}
#tab_content .content{
 padding: 15px;
 -moz-border-radius: 5px;
height:500px;
}
</style>
</head>
<body>
<div class='container' >
 <div id="tab_content">
 <div id="a" class="content">
aaaaa
 </div>
 <div id="b" class="content">
bbbbb
 </div>
 <div id="c" class="content">
cccccc
 </div>
 <div id="d" class="content">
DDDDDDDDDDDDDDd
 </div>
</div> 
<div >
<ul id='tabnav'>
    <li class='active'><a href="#a" >A</a></li>
<li ><a href="#b" >B</a></li>
<li><a href="#c" >C</a></li>
<li><a href="#d" >D</a></li>
<li ><a href="#d" ></a></li>
</ul>
</div>
</div> 
<script type="text/javascript">
    function changeStyle() {
        this.onclick = function () {
            var list = this.parentNode.childNodes;
            for (var i = 0; i < list.length; i++) {
                if (1 == list[i].nodeType && 'active' == list[i].className) {
                    list[i].className = "";
                }
            }
            this.className = 'active';
        }
    }
    var tabs = document.getElementById('tabnav').childNodes;
    for (var i = 0; i < tabs.length; i++) {
        if (1 == tabs[i].nodeType) {
            changeStyle.call(tabs[i]);
        }
    }

</script>
</body>
</html>

 

posted @ 2019-01-09 15:09  学习靠自己  阅读(362)  评论(0)  编辑  收藏  举报