用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

js栏目切换 模仿tab选项卡

2012-09-18 作者: 神马举报

[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>

[代码运行效果截图]


js栏目切换 模仿tab选项卡


网友评论    (发表评论)

共1 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...