会python真的可以为所欲为0(回)
359天前
这里还有人吗1(回)
544天前这里还有人吗0(回)
544天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
769天前到处都是羊，不想上班0(回)
849天前
鸽子
0(回)
853天前<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> |
初级程序员
by: 云代码会员 发表于：2014-09-12 19:29:56 顶(1) | 踩(0) 回复
很实用, 收藏了
回复评论