JavaScript+CSS實現tab

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

 
Javascript+css 實現網頁換膚功能
Html代碼部分:1.要有一個帶id的樣式表鏈接,我們要通過操作這個鏈接來調用不同的href.<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />2.皮膚選擇按鈕(後台爲每個li添加onclick事...查看完整版>>Javascript+css 實現網頁換膚功能
 
用DIV實現TAB效果
存放在此處,便于以後使用。在IE中可以使用,但在Firefox中中間的白色分隔欄不見了,2層貼在一起,不知道有哪位有辦法解決。代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...查看完整版>>用DIV實現TAB效果
 
javascript+css好多網站用的選星星實現打分功能的函數
函數有兩個參數,功能如下: obj: img標簽組的父容器,類型爲DOM對象; oEvent: event對象。這個函數的優點是html代碼可以很簡潔,使用圖片也可以很少,只需要兩張圖片。事件句柄只需要寫在img的父容器上即可。演...查看完整版>>javascript+css好多網站用的選星星實現打分功能的函數
 
javascript用回車鍵實現Tab鍵功能
很多羅嗦的客戶,喜歡提出這些需求!其實實現也不難!代碼如下:我前段時間看了MS的ASP.NET講座,在裏面談到了如何讓"回車鍵"使文本框的焦點一個個下移.其中提了三種方法,最好的一種是這樣的: 用客戶端腳本在頁面添加...查看完整版>>javascript用回車鍵實現Tab鍵功能
 
如何實現應用程序中的”回車”成TAB?
如何實現應用程序中的”回車”成TAB?也就是說當按Enter鍵的時候,産生的效果是按了Tab鍵. 下面是我經常使用的方法:在你的數據模塊中,添加如下代碼:interface 。。。。。。 type TMessageHandler = class //使...查看完整版>>如何實現應用程序中的”回車”成TAB?