您的位置：首页 > Web前端 > JavaScript

javascript实现选项卡切换

2015-12-12 22:46 651 查看

javascript实现选项卡切换

项目截图：

项目代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{
padding:0px;
margin:0px;
font:12px normal "microsoft yahei";
}
#tabs{
width:270px;
padding:5px;
height:150px;
line-height:20px;
}
#tabs ul{
list-style:none;
display:block;
height:30px;
line-height:30px;
border-bottom:2px solid saddlebrown ;
}
#tabs ul li{
background:#fff;
cursor:pointer;
float:left;
height:28px;
line-height:28px;
margin:0 3px;
border:1px solid #aaa;
border-bottom :none;
display:inline-block;
width:60px;
text-align:center;
}
#tabs ul li.on{
border-top:2px solid saddlebrown ;
border-left:2px solid saddlebrown ;
border-right:2px solid saddlebrown ;
//border-bottom:2px solid #fff;
background:saddlebrown;
color:white;
}
#tabs div{
height:120px;
line-height:25px;
border:1px solid #369;
border-top:none;
padding:5px;
}
.hide{
display:none;
}
</style>
<script type="text/javascript">

// JS实现选项卡切换
window.onload=function(){
var oTab=document.getElementById("tabs");
var oUl=oTab.getElementsByTagName("ul")[0];
var oLis=oUl.getElementsByTagName("li");
var oDivs=oTab.getElementsByTagName("div");

for(var i=0,len=oLis.length;i<len;i++){
oLis[i].index=i;
oLis[i].onmouseover=function(){
for(var n=0;n<len;n++){
oLis
.className="";
oDivs
.className="hide";
}
this.className="on";
oDivs[this.index].className="";
}
};
}

</script>

</head>
<body>

<div id="tabs">
<ul>
<li class="on">客至</li>
<li>蜀相</li>
<li>锦瑟</li>
</ul>
<div>
舍南舍北皆春水，但见群鸥日日来。<br>
　　花径不曾缘客扫，蓬门今始为君开。<br>
　　盘飧市远无兼味，樽酒家贫只旧醅。<br>
　　肯与邻翁相对饮，隔篱呼取尽馀杯！<br>
</div>
<div class="hide">
丞相祠堂何处寻？锦官城外柏森森。<br>
　　映阶碧草自春色，隔叶黄鹂空好音。<br>
　　三顾频烦天下计，两朝开济老臣心。<br>
　　出师未捷身先死，长使英雄泪满襟！<br>
</div>
<div class="hide">
锦瑟无端五十弦，一弦一柱思华年。<br>
　　庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>
　　沧海月明珠有泪，蓝田日暖玉生烟。<br>
　　此情可待成追忆，只是当时已惘然。<br>
</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航