174、非常漂亮的菜单条

174、非常漂亮的菜单条

脚本说明:

第一步:把如下代码加入<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()>

Write a comment

Comments: 0