按钮式滑动门点击显示相应栏目内容

2010-09-15 文本操作 ℃

脚本说明：
第一步:把如下代码加入<body>区域中:
<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 CLASS=conts ID=t1Contents>This text is on tab one</DIV>
<DIV CLASS=conts ID=t2Contents>This text is on tab two</DIV>
<DIV CLASS=conts ID=t3Contents>This text is on tab three</DIV>
<DIV CLASS=conts ID=t4Contents>This text is on tab four</DIV>
<DIV CLASS=conts ID=t5Contents>This text is on tab five</DIV>
<DIV CLASS=conts ID=t6Contents>This text is on tab six</DIV>
<DIV CLASS=conts ID=t7Contents>This text is on tab seven</DIV>

第二步:把<body>中的内容改为：
<body bgcolor="#fef4d9" onload=init() onclick=changeTabs()>

相关特效代码

热门特效代码: 输入框的文字闪烁变色引人注意; 纯CSS内页内容切换选项卡; 鼠标经过链接显示注释旋转风火轮; 指向自动选择的输入框; 放大镜链接效果; 带注释的链接特效; 文字闪烁效果; 带注释的链接特效代码; 点击文字显示隐藏链接; WEB2.0圆形边框css做法

推荐特效代码: 字符连续消隐; 文字变色逐个出现; 段落文字百叶窗效果输出; 点击文字显示隐藏链接; 文字由小变大由大变小（动态变化; 文字来回上下移动或跳动