花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來到素材無憂網(wǎng),按 + 收藏我們
登錄 注冊 退出 找回密碼

一款好用的css選項卡

時間： 2019-05-30 12:01 閱讀： 次 作者：素材無憂網(wǎng)

<!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":"";/*三目運算 等號優(yōu)先*/
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)" class="hover">選項卡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',1,9)" class="hover"><a>選項卡1</a></li>
<li id="two2" onclick="setTab('two',2,9)"><a>選項卡2</a></li>
<li id="two3" onclick="setTab('two',3,9)"><a>選項卡3</a></li>
<li id="two4" onclick="setTab('two',4,9)"><a>選項卡4</a></li>
<li id="two5" onclick="setTab('two',5,9)"><a>選項卡5</a></li>
<li id="two6" onclick="setTab('two',6,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 class="city_ser_show" id="con_two_1">
選項卡1
<p>這個選項卡很NB吧!</p>
</div>
<div class="city_ser_show" id="con_two_2">
選項卡2
<p>是用javascript做的!</p>
</div>
<div class="city_ser_show" id="con_two_3">
選項卡3
<p>很無聊啊!</p>
</div>
<div class="city_ser_show" id="con_two_4">
選項卡4
<p>我很利害吧!</p>
</div>
<div class="city_ser_show" id="con_two_5">
選項卡5
<p>不要問我為什么!</p>
</div>
<div class="city_ser_show" id="con_two_6">
選項卡6
<p>都是為了大家的方便!</p>
</div>
<div class="city_ser_show" id="con_two_7">
選項卡6
<p>都是為了大家的方便!</p>
</div>
<div class="city_ser_show" id="con_two_8">
選項卡6
<p>都是為了大家的方便!</p>
</div>
<div class="city_ser_show" id="con_two_9">
選項卡6
<p>都是為了大家的方便!</p>
</div>
</div>
</div>
</body>
</html>

我自己寫的 美工還得你自己來改

版權聲明： 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布，如果侵犯了您的權益請與我們聯(lián)系，我們將在24小時內刪除！謝謝！

轉載請注明： 一款好用的css選項卡

標簽：  
相關文章
模板推薦