状态栏条-网页制作-轻松学电脑

没有公告

	加入收藏
	设为首页
	联系站长

轻松学电脑>>网页制作>>文本特效类>>状态栏条

双击滚屏阅读

状态栏条

状态栏条

按钮一	按钮二	按钮三	按钮四	按钮五	按钮六	按钮七

按钮一的文字信息

按钮一的文字信息

按钮二的文字信息

按钮三的文字信息

按钮四的文字信息

按钮五的文字信息

按钮六的文字信息

按钮七的文字信息

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

上一篇文章：点击出现链接

下一篇文章：链接在右面打开

阅读top10

	文字弯曲变形
	文字向左移动
	按钮驱动文字闪烁
	文字胡乱跳动
	链接在右面打开
	状态栏条
	点击出现链接
	文字连续闪烁
	文字段任意移动
	点击改变文字
	文字逐个闪烁
	各种形式文字输出
	文字飘动输出
	调节文字移动形式

查看状态栏条全部内容