改变li标签的className以及改变content的display属性 {选项卡的制作}
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了改变li标签的className以及改变content的display属性 {选项卡的制作}相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选项卡的制作</title>
<script src="../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 onmouseover="showContent(1)" id="tab1" class="tabSelected">
<a href="">新闻</a>
</li>
<li onmouseover="showContent(2)" id="tab2" class="">
<a href="">体育</a>
</li>
<li onmouseover="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属性 {选项卡的制作}的主要内容，如果未能解决你的问题，请参考以下文章
js点击ul中某个li标签,改变这个li标签的背景图,当点击其它li标签时前一个被点击的标签背景
在HTML中如果在ul>li中添加子标签>a链接，修改li中字词颜色为啥a的字体颜色没有改变?