按鈕式滑動門點擊顯示相應欄目內(nèi)容

2010-09-15 文本操作 ℃

腳本說明：
第一步:把如下代碼加入<body>區(qū)域中:
<STYLE>
.conts  {visibility:hidden}
.tab    {       border-top:solid thin #E0E0E0;
                        border-right:solid thin gray;
                        border-left:solid thin #E0E0E0;
                        font-family:Verdana;
                        font-size:10pt;
                        text-align:center;
                        font-weight:normal}

.selTab {       border-left:solid thin white;
                        border-top:solid thin white;
                        border-right:solid thin black;
                        font-weight:bold;
                        text-align:center}

</STYLE>
<SCRIPT LANGUAGE=JavaScript>

//a public function that the container uses to pass in values for the labels
function public_Labels(label1, label2, label3, label4, label5, label6, label7){
        
        t1.innerText = label1;
        t2.innerText = label2;
        t3.innerText = label3;
        t4.innerText = label4;
        t5.innerText = label5;
        t6.innerText = label6;
        t7.innerText = label7;
}

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){

t1Contents.innerHTML = contents1;
        t2Contents.innerHTML = contents2;
        t3Contents.innerHTML = contents3;
        t4Contents.innerHTML = contents4;
        t5Contents.innerHTML = contents5;
        t6Contents.innerHTML = contents6;
        t7Contents.innerHTML = contents7;

init();
}

//sets the default display to tab 1
function init(){
        tabContents.innerHTML = t1Contents.innerHTML;
}

//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;

function changeTabs(){

if(firstFlag == true){
                currentTab = t1;
                tabBase = t1base;
                firstFlag = false;
        }

if(window.event.srcElement.className == "tab"){

currentTab.className = "tab";

tabBase.style.backgroundColor = "white";

currentTab = window.event.srcElement;

tabBaseID = currentTab.id + "base";

tabContentID = currentTab.id + "Contents";

tabBase = document.all(tabBaseID);

tabContent = document.all(tabContentID);

currentTab.className = "selTab";
                
                tabBase.style.backgroundColor = "";

tabContents.innerHTML = tabContent.innerHTML;

}
}

</SCRIPT>

<TR>
                <TD HEIGHT="*" COLSPAN=7 ID=tabContents

STYLE=" border-left:solid thin white;
                                                                                        border-bottom:solid thin white;
                                                                                        border-right:solid thin white">sample contents</TD>

</TR>
</TABLE>
</DIV>

<div   id="cj7sctz"   class=conts ID=t1Contents>This text is on tab one</DIV>
<div   id="usmy7hy"   class=conts ID=t2Contents>This text is on tab two</DIV>
<div   id="9vp9z4e"   class=conts ID=t3Contents>This text is on tab three</DIV>
<div   id="ayifacs"   class=conts ID=t4Contents>This text is on tab four</DIV>
<div   id="kmyoezn"   class=conts ID=t5Contents>This text is on tab five</DIV>
<div   id="yardui7"   class=conts ID=t6Contents>This text is on tab six</DIV>
<div   id="swgujyn"   class=conts ID=t7Contents>This text is on tab seven</DIV>

第二步:把<body>中的內(nèi)容改為：
<body bgcolor="#fef4d9" onload=init() onclick=changeTabs()>

相關特效代碼

熱門特效代碼: 輸入框的文字閃爍變色引人注意; 純CSS內(nèi)頁內(nèi)容切換選項卡; 鼠標經(jīng)過鏈接顯示注釋旋轉風火輪; 指向自動選擇的輸入框; 放大鏡鏈接效果; 帶注釋的鏈接特效; 文字閃爍效果; 帶注釋的鏈接特效代碼; 點擊文字顯示隱藏鏈接; WEB2.0圓形邊框css做法

推薦特效代碼: 字符連續(xù)消隱; 文字變色逐個出現(xiàn); 段落文字百葉窗效果輸出; 點擊文字顯示隱藏鏈接; 文字由小變大由大變�。▌討B(tài)變化; 文字來回上下移動或跳動