html css js 實現(xiàn)tab標簽頁示例代碼
來源:易賢網(wǎng) 閱讀:792 次 日期:2016-06-15 08:47:37
溫馨提示:易賢網(wǎng)小編為您整理了“html css js 實現(xiàn)tab標簽頁示例代碼”,方便廣大網(wǎng)友查閱!

代碼如下:

<html xmlns=>

<head>

<meta http-equiv=content-type content=text/html; charset=gbk />

<meta http-equiv=content-language content=zh-cn />

<meta name=roots content= />

<meta name=keywords content= />

<meta name=description content= />

<title></title>

<style type=text/css>

body{font:宋體;font-size:12px;}

a:link,a:visited{font-size:12px;color:#666;text-decoration:none;}

a:hover{color:#ff0000;text-decoration:underline;}

#tab{margin:0 auto;width:220px;border:1px solid #bce2f3;}

.menubox{height:28px;border-bottom:1px solid #64b8e4;background:#e4f2fb;}

.menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;}

.menubox ul li{float:left;background:#64b8e4;line-height:20px;display:block;cursor:pointer;width:65px;text-align:center;color:#fff;font-weight:bold;border-top:1px solid #64b8e4;border-left:1px solid #64b8e4;border-right:1px solid #64b8e4;}

.menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147ab8;}

.contentbox{clear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;height:100%;}

.contentbox ul{list-style:none;margin:7px;padding:0;}

.contentbox ul li{line-height:24px;border-bottom:1px dotted #ccc;}

</style>

<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?hover:;

con.style.display=i==cursel?block:none;

}

}

//-->

</script>

</head>

<body>

<div id=tab>

<div class=menubox>

<ul>

<li id=menu1 onmouseover=settab('menu',1,2) class=hover>高職高專</li>

<li id=menu2 onmouseover=settab('menu',2,2) >民辦學校</li>

</ul>

</div>

<div class=contentbox>

<div id=con_menu_1 class=hover>

<ul>

<li>·<a href=#>北京工業(yè)職業(yè)技術(shù)學院</a></li>

<li>·<a href=#>北京財貿(mào)職業(yè)學院</a></li>

<li>·<a href=#>天津職業(yè)大學</a></li>

<li>·<a href=#>大連職業(yè)技術(shù)學院</a></li>

<li>·<a href=#>遼寧交通高等??茖W校</a></li>

<li>·<a href=#>浙江金融職業(yè)學院</a></li>

<li>·<a href=#>山東商業(yè)職業(yè)技術(shù)學院</a></li>

<li>·<a href=#>寧波職業(yè)技術(shù)學院</a></li>

<li>·<a href=#>武漢職業(yè)技術(shù)學院</a></li>

</ul>

</div>

<div id=con_menu_2 style=display:none>

<ul>

<li>·<a href=#>江西藍天學院</a></li>

<li>·<a href=#>西安外事學院</a></li>

<li>·<a href=#>湖南涉外經(jīng)濟學院</a></li>

<li>·<a href=#>西安翻譯學院</a></li>

<li>·<a href=#>三江學院</a></li>

<li>·<a href=#>北京城市學院</a></li>

<li>·<a href=#>黃河科技學院</a></li>

<li>·<a href=#>吉林華橋外國語學院</a></li>

<li>·<a href=#>浙江樹人學院</a></li>

</ul>

</div>

</div>

</div>

</body>

</html>

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機網(wǎng)站地址:html css js 實現(xiàn)tab標簽頁示例代碼
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)