<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/HTML; charset=gb2312" />
<Title>选项卡</Title>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementByID(name+i);/* two1 */
var con=document.getElementByID("con_"+name+"_"+i);/* con_two_1 */
menu.classname=i==cursel?"hover":"";/*三目运算 等号优先*/
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
<style type="text/CSS">
.city_ser_show{display:none;wIDth:490px;height:200px;border:1px solID #CCCCCC;}
#con_two_1{display:block;}
#menuBox{wIDth:500px;height:24px;margin-bottom:7px;}
#menuBox ul{margin:0;padding:0;}
#menuBox ul li{float:left;List-style:none;display:inline;padding-top:7px;border:1px solID #D1D1D1;border-bottom:0px;margin:0 10px;white-space:nowrap; text-overflow:ellipsis;cursor:pointer;wIDth:60px;height:24px;text-align:center;Font-size:14px;overflow:visible;}
#menuBox ul li.hover{border-top:2px solID #D1D1D1;border-right:2px solID #D1D1D1;border-left:2px solID #D1D1D1;color: #000000;Font-weight:bold;border-bottom:0px solID #D1D1D1;}
</style>
</head>
<body>
<div ID="main">
<div ID="menuBox">
<!--样式1 滑动选项卡-->
<!--
<ul>
<li ID="two1" onmousemove="setTab('two',1,6)" >选项卡1</li>
<li ID="two2" onmousemove="setTab('two',2,6)">选项卡2</li>
<li ID="two3" onmousemove="setTab('two',3,6)">选项卡3</li>
<li ID="two4" onmousemove="setTab('two',4,6)">选项卡4</li>
<li ID="two5" onmousemove="setTab('two',5,6)">选项卡5</li>
<li ID="two6" onmousemove="setTab('two',6,6)">选项卡6</li>
</ul>
-->
<!--样式2 -->
<ul>
<li ID="two1" onclick="setTab('two',9)" ><a>选项卡1</a></li>
<li ID="two2" onclick="setTab('two',9)"><a>选项卡2</a></li>
<li ID="two3" onclick="setTab('two',9)"><a>选项卡3</a></li>
<li ID="two4" onclick="setTab('two',9)"><a>选项卡4</a></li>
<li ID="two5" onclick="setTab('two',9)"><a>选项卡5</a></li>
<li ID="two6" onclick="setTab('two',9)"><a>选项卡6</a></li>
<li ID="two7" onclick="setTab('two',7,9)"><a>选项卡7</a></li>
<li ID="two8" onclick="setTab('two',8,9)"><a>选项卡8</a></li>
<li ID="two9" onclick="setTab('two',9,9)"><a>选项卡9</a></li>
</ul>
</div>
<div ID="conten">
<div ID="con_two_1">
选项卡1
<p>这个选项卡很NB吧!</p>
</div>
<div ID="con_two_2">
选项卡2
<p>是用JavaScript做的!</p>
</div>
<div ID="con_two_3">
选项卡3
<p>很无聊啊!</p>
</div>
<div ID="con_two_4">
选项卡4
<p>我很利害吧!</p>
</div>
<div ID="con_two_5">
选项卡5
<p>不要问我为什么!</p>
</div>
<div ID="con_two_6">
选项卡6
<p>都是为了大家的方便!</p>
</div>
<div ID="con_two_7">
选项卡6
<p>都是为了大家的方便!</p>
</div>
<div ID="con_two_8">
选项卡6
<p>都是为了大家的方便!</p>
</div>
<div ID="con_two_9">
选项卡6
<p>都是为了大家的方便!</p>
</div>
</div>
</div>
</body>
</HTML>
我自己写的 美工还得你自己来改
总结以上是内存溢出为你收集整理的一款好用的css选项卡全部内容，希望文章能够帮你解决一款好用的css选项卡所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）