[javascript]代码库
<html>
<head>
<title>js栏目切换 模仿tab选项卡</title>
<style type="text/css">
ul li {
float: left;
list-style-type: none;
text-align: center;
width: 80px;
height: 20px;
line-height: 20px;
color: #036;
cursor: pointer;
border: 1px solid #CCC;
margin-right: 5px;
}
.Menubox .Contentbox {
margin-top: 0px;
height: 100px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
position: relative;
top: -1px;
border: 1px solid #CCC;
background-color: #FFC;
}
.Menubox .tab {
height: 20px;
text-align: center;
}
.Menubox {
width: 450px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<script>
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"current_sidebar":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
js栏目切换 模仿tab选项卡
<div class="Menubox">
<div class="tab">
<ul>
<li id="one1" onclick="setTab('one',1,3)">Web开发</li>
<li id="one2" onclick="setTab('one',2,3)">Java开发</li>
<li id="one3" onclick="setTab('one',3,3)">UI美工</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1">web开发技术讨论群：262334579</div>
<div id="con_one_2" style="display:none">java开发技术讨论群：216679175</div>
<div id="con_one_3" style="display:none">新开UI设计讨论群：262784184</div>
</div>
</div>
<br>
<br>
<br>
<br>
云代码 - 我的个人代码库 - <a href="http://www.yuncode.net">www.yuncode.net</a>
</body>
</html>
[代码运行效果截图]
会python真的可以为所欲为0(回)
3天前
这里还有人吗1(回)
188天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
413天前
鸽子
0(回)
497天前
初级程序员
by: 云代码会员 发表于：2014-09-12 19:29:56 顶(1) | 踩(0) 回复
很实用, 收藏了
回复评论