首页 > 代码库 > 改变li标签的className以及改变content的display属性 {选项卡的制作}
改变li标签的className以及改变content的display属性 {选项卡的制作}
html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选项卡的制作</title>
<script src="http://www.mamicode.com/js/try.js"></script>
<style type="text/css">
ul#tabNav{
width:400px;
list-style:none;
border-bottom:1px solid green;
margin:0;
padding-left:0;
padding-bottom:26px;
*padding-bottom: 0;
}
ul#tabNav li{
float:left;
height:25px;
margin:0 10px -2px 0;
background-color:green;
color:black;
border:1px solid green;
border-bottom:0;
padding:0;
}
ul#tabNav a:link ,ul#tabNav a:visited {
display:block;
text-decoration:none;
padding：5px 10px 3px 10px;
}
#tabContent{
width:400px;
height:200px;
border:1px solid green;
border-top-width: 0;
}
#tabNav li.tabSelected{
background-color:#ffcc00;
color:#fff;
}
</style>
</head>
<body>
<ul id="tabNav">
<li onm ouseover="showContent(1)" id="tab1" class="tabSelected">
<a href="">新闻</a>
</li>
<li onm ouseover="showContent(2)" id="tab2" class="">
<a href="">体育</a>
</li>
<li onm ouseover="showContent(3)" id="tab3" class="">
<a href="">娱乐</a>
</li>
</ul>
<div id="tabContent">
<div id="content1">新闻内容</div>
<div id="content2" style="display:none">体育内容</div>
<div id="content3" style="display:none">娱乐内容</div>
</div>
</body>
</html>
JS
function showContent(index){ /*展示第index个内容*/
var e = document.getElementById("content"+index); /*先将第index的div元素取到*/
e.style.display=""; /*将当前的display设置“”，即显示*/
for(var i=1;i<4;i++){
if(i != index){
var e2 = document.getElementById("content"+i);
e2.style.display="none";
document.getElementById("tab"+i).className=""; /*不是当前选中的则清空className*/
}
else{
document.getElementById("tab"+i).className="tabSelected"; /*将当前选中的设置为tabSelected*/
}
}
}
改变li标签的className以及改变content的display属性 {选项卡的制作}