html 選項(xiàng)卡切換內(nèi)容如何實(shí)現(xiàn)

html 選項(xiàng)卡切換內(nèi)容方法：

成都創(chuàng)新互聯(lián)公司聯(lián)系熱線：18982081108，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)公司網(wǎng)頁制作領(lǐng)域10年，包括成都水電改造等多個(gè)行業(yè)擁有多年的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)公司，為網(wǎng)站保駕護(hù)航。

工具/原料

網(wǎng)頁編輯器dreamweaver

javascript中的getElementById和getElementsByTagName方法

操作步驟：

1、三個(gè)DIV形成的版塊只會(huì)顯示第三個(gè)汽車的內(nèi)容。

二、制作過程

1、 制作HTML結(jié)構(gòu)框架

2、完成對(duì)應(yīng)CSS的輸入，使頁面形成特定布局

!DOCTYPE?html?

html?lang="en"?

head?

meta?charset="UTF-8"?

titletab切換/title?

style?type="text/css"?

button?{?

width:120px;?

height:?32px;?

line-height:?32px;?

background-color:?#ccc;?

font-size:?24px;?

}?

div?{?

display:?none;?

width:200px;?

height:?200px;?

font-size:?72px;?

color:#ddd;?

background-color:?green;?

border:1px?solid?black;?

}?

/style?

/head?

body?

button?style="background-color:?yellow;"1/button?

button2/button?

button3/button?

button4/button?

div?style="display:block;"1/div?

div2/div?

div3/div?

div4/div?

script?type="text/javascript"?

var?buttonArr?=?document.getElementsByTagName("button");?

var?divArr?=?document.getElementsByTagName("div");?

for(var?i?=?0;?i??buttonArr.length;i++)?{?

buttonArr[i].index?=?i;?

//?buttonArr[i].setAttribute("index",i);?

buttonArr[i].onclick?=?function()?{?

for(var?j?=?0;?j??buttonArr.length;?j++)?{?

buttonArr[j].style.backgroundColor?=?"#ccc";?

buttonArr[this.index].style.backgroundColor?=?"yellow";?

divArr[j].style.display?=?"none";?

divArr[this.index].style.display?=?"block";?

}?

}?

}?

/script?

/body?

/html

3、輸寫javascript代碼，對(duì)選項(xiàng)卡標(biāo)頭分別注冊(cè)相應(yīng)的事件

!doctype?html?

html?lang="en"?

head?

meta?charset="UTF-8"?

titletab/title?

style?type="text/css"?

*?{padding:0;?margin:0;}?

button?{?

background-color:?#ccc;?

width:80px;?

height:?30px;?

}?

.btn-active?{?

background-color:?yellow;?

font-weight:bold;?

font-size:?14px;?

}?

div{?

width:200px;?

height:?200px;?

font-size:?64px;?

background-color:?#0c0;?

display:?none;?

color:#fff;?

}?

.div-active?{?

display:?block;?

}?

/style?

/head?

body?

button?class="btn-active"按鈕1/button?

button按鈕2/button?

button按鈕3/button?

button按鈕4/button?

div?class="div-active"1/div?

div2/div?

div3/div?

div4/div?

script?type="text/javascript"?

//1.先獲取元素?

var?buttonList?=?document.getElementsByTagName("button");?

var?divList?=?document.getElementsByTagName("div");?

//2.添加事件?

for(var?i?=?0;?i??buttonList.length;?i++)?{?

buttonList[i].index?=?i;?

buttonList[i].onclick?=?function()?{?

for(var?j?=?0;?j??buttonList.length;j++)?{?

buttonList[j].className?=?"";?

divList[j].className?=?"";?

}?

this.className?=?"btn-active";?

divList[this.index].className?=?"div-active";?

}?

}?

/script?

/body?

/html

4、完整代碼：

!DOCTYPE?htmlhtmlhead?lang="en"

meta?charset="UTF-8"

title?選項(xiàng)卡/title

style?type="text/css"

/*?CSS樣式制作?*/??

*{padding:0px;?margin:0px;}

a{?text-decoration:none;?color:black;}

a:hover{text-decoration:none;?color:#336699;}

#tab{width:270px;?padding:5px;height:150px;margin:20px;}

#tab?ul{list-style:none;?display:;height:30px;line-height:30px;?border-bottom:2px?#C88?solid;}

#tab?ul?li{background:#FFF;cursor:pointer;float:left;list-style:none?height:29px;?line-height:29px;padding:0px?10px;?margin:0px?10px;?border:1px?solid?#BBB;?border-bottom:2px?solid?#C88;}

#tab?ul?li.on{border-top:2px?solid?Saddlebrown;?border-bottom:2px?solid?#FFF;}

#tab?div{height:100px;width:250px;?line-height:24px;border-top:none;??padding:1px;?border:1px?solid?#336699;padding:10px;}

.hide{display:none;}

/style

script?type="text/javascript"

//?JS實(shí)現(xiàn)選項(xiàng)卡切換

window.onload?=?function(){

var?myTab?=?document.getElementById("tab");????//整個(gè)div

var?myUl?=?myTab.getElementsByTagName("ul")[0];//一個(gè)節(jié)點(diǎn)

var?myLi?=?myUl.getElementsByTagName("li");????//數(shù)組

var?myDiv?=?myTab.getElementsByTagName("div");?//數(shù)組

for(var?i?=?0;?imyLi.length;i++){

myLi[i].index?=?i;

myLi[i].onclick?=?function(){

for(var?j?=?0;?j??myLi.length;?j++){

myLi[j].className="off";

myDiv[j].className?=?"hide";

}

this.className?=?"on";

myDiv[this.index].className?=?"show";

}

}

}

/script/headbody!--?HTML頁面布局?--div?id?=?"tab"

ul

li?class="off"房產(chǎn)/li

li?class="on"家居/li

li?class="off"二手房/li

/ul

div?id="firstPage"?class="hide"

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

/div

div?id="secondPage"?class="show"

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

/div

div?id="thirdPage"?class?=?"hide"

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

a?href?=?"#"切換代碼tab/abr/

/div/div/body/html

請(qǐng)問HTML中的選項(xiàng)卡的代碼解釋

這是一個(gè)鼠標(biāo)事件：

比如：BODY

a href="#" onmouseover="javascript:mydiv.style.display='inline'" onmouseout="javascript:mydiv.style.display='none'"鼠標(biāo)放上來/a

br

div id="mydiv" style="display:none;top=200;left=200"我顯示出來了/div

/BODY

你把鏈接改為你的選項(xiàng)卡 在里面加上事件就可以啦 top 和left 是用來設(shè)定位置的

HTML選項(xiàng)卡怎么使用？

進(jìn)入“Internet選項(xiàng)”窗口，選擇“常規(guī)”選項(xiàng)卡，點(diǎn)擊“選項(xiàng)卡”對(duì)話框下面的“設(shè)置”按鈕，在“選項(xiàng)卡瀏覽設(shè)置”窗口下的“遇到彈出窗口時(shí)：”對(duì)話框里點(diǎn)選“始終在新窗口中打開彈出窗口”，在“從位于以下位置的其它程序打開鏈接”下選擇“新窗口”，確定退出即可。 此外，你還可以用鼠標(biāo)中間那個(gè)滑輪點(diǎn)連接，又或者按住鍵盤上的“Ctrl”鍵再去點(diǎn)連接。

分享題目：html5選項(xiàng)卡,HTML選項(xiàng)卡
分享鏈接：http://chinadenli.net/article33/dsehcps.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)