| 導購 | 订阅 | 在线投稿
分享
 
 
 

JavaScript+CSS實現tab

2008-08-15 05:13:22  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||
 

<!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 runat="server">

<title>使用JavaScript實現的tab</title>

<style type="text/css">

/*設置超鏈接樣式*/

a

{

color: #5086a5;

text-decoration: none;

font-size: 12px;

}

a:hover

{

color: #5086a5;

text-decoration: underline;

font-size: 12px;

}

a:visited

{

color: #5086a5;

font-size: 12px;

}

/*整個tab層居中,寬度爲600px*/

#tabDiv

{

width:600px;

margin:1em auto;

padding-bottom: 10px;

border-right: #b2c9d3 1px solid;

border-top: #b2c9d3 1px solid;

border-left: #b2c9d3 1px solid;

border-bottom: #b2c9d3 1px solid;

background: #ffffff;

}

/*tab頭的樣式*/

#tabsHead

{

padding-left: 0px;

height: 26px;

background-color: #e8f7fc;

font-size: 1em;

margin: 1px 0px 0px;

color: #5086a5;

line-height: 26px;

}

/*已選tab頭(超鏈接)的樣式*/

.curtab

{

padding-top: 0px;

padding-right: 10px;

padding-bottom: 0px;

padding-left: 10px;

border-right: #b2c9d3 1px solid;

font-weight: bold;

float: left;

cursor: pointer;

background: #ffffff;

}

/*未選tab頭(超鏈接)的樣式*/

.tabs

{

border-right: #c1d8e0 1px solid;

padding-top: 0px;

padding-right: 10px;

padding-bottom: 0px;

padding-left: 10px;

font-weight: normal;

float: left;

cursor: pointer;

}

p

{

font-size:9pt;

margin-left:20pt;

}

</style>

<script language="javascript" type="text/jscript">

<!--

//顯示tab(tabHeadId:tab頭中當前的超鏈接;tabContentId要顯示的層ID)

function showTab(tabHeadId,tabContentId)

{

//tab層

var tabDiv = document.getElementById("tabDiv");

//將tab層中所有的內容層設爲不可見

//遍曆tab層下的所有子節點

var taContents = tabDiv.childNodes;

for(i=0; i<taContents.length; i++)

{

//將所有內容層都設爲不可見

if(taContents[i].id!=null && taContents[i].id != 'tabsHead')

{

taContents[i].style.display = 'none';

}

}

//將要顯示的層設爲可見

document.getElementById(tabContentId).style.display = 'block';

//遍曆tab頭中所有的超鏈接

var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');

for(i=0; i<tabHeads.length; i++)

{

//將超鏈接的樣式設爲未選的tab頭樣式

tabHeads[i].className='tabs';

}

//將當前超鏈接的樣式設爲已選tab頭樣式

document.getElementById(tabHeadId).className='curtab';

document.getElementById(tabHeadId).blur();

}

-->

</script>

</head>

<body>

<form id="form1" runat="server">

<!--tab控件-->

<div id="tabDiv">

<!--tab頭-->

<div id="tabsHead">

<a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗頭鳳</a>

<a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">蔔算子·詠梅</a>

</div>

<div id="tabContent1" style="display:block">

<p>

紅稣手,黃藤酒,<br />

滿城春色宮牆柳。<br />

東風惡,歡情薄。<br />

一杯愁緒,幾年離索。<br />

錯、錯、錯。<br /><br />

春如舊,人空瘦,<br />

淚痕紅浥鲛绡透。<br />

桃花落,閑池閣,<br />

山盟雖在,錦書難托。<br />

莫、莫、莫。<br />

</p>

</div>

<div id="tabContent2" style="display:none">

<p>

驿外斷橋邊,寂寞開無主。<br />

已是黃昏獨自愁,更著風和雨。<br />

無意苦爭春,一任群芳妒。<br />

零落成泥碾作塵,只有香如故。<br />

</p>

</div>

</div>

<!--tb控件結束-->

</form>

</body>

</html>

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" > <head runat="server"> <title>使用JavaScript實現的tab</title> <style type="text/css"> /*設置超鏈接樣式*/ a { color: #5086a5; text-decoration: none; font-size: 12px; } a:hover { color: #5086a5; text-decoration: underline; font-size: 12px; } a:visited { color: #5086a5; font-size: 12px; } /*整個tab層居中,寬度爲600px*/ #tabDiv { width:600px; margin:1em auto; padding-bottom: 10px; border-right: #b2c9d3 1px solid; border-top: #b2c9d3 1px solid; border-left: #b2c9d3 1px solid; border-bottom: #b2c9d3 1px solid; background: #ffffff; } /*tab頭的樣式*/ #tabsHead { padding-left: 0px; height: 26px; background-color: #e8f7fc; font-size: 1em; margin: 1px 0px 0px; color: #5086a5; line-height: 26px; } /*已選tab頭(超鏈接)的樣式*/ .curtab { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; border-right: #b2c9d3 1px solid; font-weight: bold; float: left; cursor: pointer; background: #ffffff; } /*未選tab頭(超鏈接)的樣式*/ .tabs { border-right: #c1d8e0 1px solid; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; font-weight: normal; float: left; cursor: pointer; } p { font-size:9pt; margin-left:20pt; } </style> <script language="javascript" type="text/jscript"> <!-- //顯示tab(tabHeadId:tab頭中當前的超鏈接;tabContentId要顯示的層ID) function showTab(tabHeadId,tabContentId) { //tab層 var tabDiv = document.getElementById("tabDiv"); //將tab層中所有的內容層設爲不可見 //遍曆tab層下的所有子節點 var taContents = tabDiv.childNodes; for(i=0; i<taContents.length; i++) { //將所有內容層都設爲不可見 if(taContents[i].id!=null && taContents[i].id != 'tabsHead') { taContents[i].style.display = 'none'; } } //將要顯示的層設爲可見 document.getElementById(tabContentId).style.display = 'block'; //遍曆tab頭中所有的超鏈接 var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a'); for(i=0; i<tabHeads.length; i++) { //將超鏈接的樣式設爲未選的tab頭樣式 tabHeads[i].className='tabs'; } //將當前超鏈接的樣式設爲已選tab頭樣式 document.getElementById(tabHeadId).className='curtab'; document.getElementById(tabHeadId).blur(); } --> </script> </head> <body> <form id="form1" runat="server"> <!--tab控件--> <div id="tabDiv"> <!--tab頭--> <div id="tabsHead"> <a class="curtab" id="tabs1" href="javascript:showTab('tabs1','tabContent1')">钗頭鳳</a> <a class="tabs" id="tabs2" href="javascript:showTab('tabs2','tabContent2')">蔔算子·詠梅</a> </div> <div id="tabContent1" style="display:block"> <p> 紅稣手,黃藤酒,<br /> 滿城春色宮牆柳。<br /> 東風惡,歡情薄。<br /> 一杯愁緒,幾年離索。<br /> 錯、錯、錯。<br /><br /> 春如舊,人空瘦,<br /> 淚痕紅浥鲛绡透。<br /> 桃花落,閑池閣,<br /> 山盟雖在,錦書難托。<br /> 莫、莫、莫。<br /> </p> </div> <div id="tabContent2" style="display:none"> <p> 驿外斷橋邊,寂寞開無主。<br /> 已是黃昏獨自愁,更著風和雨。<br /> 無意苦爭春,一任群芳妒。<br /> 零落成泥碾作塵,只有香如故。<br /> </p> </div> </div> <!--tb控件結束--> </form> </body> </html>
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有