⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 829text5.htm

📁 javascript各种效果的实例及源代码
💻 HTM
字号:
<html>
<head>
<title>状态栏条</title>
<style type="text/css">
<!--
body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 4px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }
 A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
--></style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#fef4d9" onload=init() onclick=changeTabs()>
<br>
<center><font color=red face="隶书" size=6>状态栏条</font></center>
<br>
<br>
<br>
<br>

<center>
<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:50; height:350; width:500; left:140; border:none thin gray">


<TABLE STYLE="width:100%; height:250" CELLPADDING=0 CELLSPACING=0>
        <TR>
                <TD ID=t1 CLASS=selTab HEIGHT=25>按钮一</TD>
                <TD ID=t2 CLASS=tab>按钮二</TD>
                <TD ID=t3 CLASS=tab>按钮三</TD>
                <TD ID=t4 CLASS=tab>按钮四</TD>
                <TD ID=t5 CLASS=tab>按钮五</TD>
                <TD ID=t6 CLASS=tab>按钮六</TD>
                <TD ID=t7 CLASS=tab>按钮七</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>按钮一的文字信息</DIV>
<DIV CLASS=conts ID=t2Contents>按钮二的文字信息</DIV>
<DIV CLASS=conts ID=t3Contents>按钮三的文字信息</DIV>
<DIV CLASS=conts ID=t4Contents>按钮四的文字信息</DIV>
<DIV CLASS=conts ID=t5Contents>按钮五的文字信息</DIV>
<DIV CLASS=conts ID=t6Contents>按钮六的文字信息</DIV>
<DIV CLASS=conts ID=t7Contents>按钮七的文字信息</DIV>
</center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>

<SCRIPT LANGUAGE="JavaScript">

<!-- hide
function goHist(a)
{
   history.go(a);
}
//-->
</script>
<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<center>
<textarea name=source rows=12 cols=55 class=yk9>
脚本说明:
第一步:把如下代码加入<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()>
</textarea>
<br>

<br>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -