Javascript模拟书签式按钮

Javascript模拟书签式按钮

脚本说明：
第一步:把如下代码加入<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>

<DIV STYLE="position:absolute; top:40; height:350; width:500; left:25; border:none thin gray">

<TABLE STYLE="width:100%; height:250" CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD ID=t1 CLASS=selTab HEIGHT=25>tab 1</TD>
        <TD ID=t2 CLASS=tab>tab 2</TD>
        <TD ID=t3 CLASS=tab>tab 3</TD>
        <TD ID=t4 CLASS=tab>tab 4</TD>
        <TD ID=t5 CLASS=tab>tab 5</TD>
        <TD ID=t6 CLASS=tab>tab 6</TD>
        <TD ID=t7 CLASS=tab>tab 7</TD>
    </TR>
    <TR>
        <TD ID=t1base STYLE="height:2; border-left:solid thin white"></TD>
        <TD ID=t2base STYLE="height:2; background-color:white"></TD>
        <TD ID=t3base STYLE="height:2; background-color:white"></TD>
        <TD ID=t4base STYLE="height:2; background-color:white"></TD>
        <TD ID=t5base STYLE="height:2; background-color:white"></TD>
        <TD ID=t6base STYLE="height:2; background-color:white"></TD>
        <TD ID=t7base STYLE="height:2; background-color:white; border-right:solid thin white"></TD>
    </TR>

    <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()>