html 选项卡切换内容如何实现

html 选项卡切换内容方法：

成都创新互联公司联系热线：18982081108，为您提供成都网站建设网页设计及定制高端网站建设服务，成都创新互联公司网页制作领域10年，包括成都水电改造等多个行业拥有多年的网站设计经验，选择成都创新互联公司，为网站保驾护航。

工具/原料

网页编辑器dreamweaver

javascript中的getElementById和getElementsByTagName方法

操作步骤：

1、三个DIV形成的版块只会显示第三个汽车的内容。

二、制作过程

1、 制作HTML结构框架

2、完成对应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代码，对选项卡标头分别注册相应的事件

!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 选项卡/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实现选项卡切换

window.onload = function(){

var myTab = document.getElementById("tab");    //整个div

var myUl = myTab.getElementsByTagName("ul")[0];//一个节点

var myLi = myUl.getElementsByTagName("li");    //数组

var myDiv = myTab.getElementsByTagName("div"); //数组

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"房产/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

请问HTML中的选项卡的代码解释

这是一个鼠标事件：

比如：BODY

a href="#" onmouseover="javascript:mydiv.style.display='inline'" onmouseout="javascript:mydiv.style.display='none'"鼠标放上来/a

br

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

/BODY

你把链接改为你的选项卡 在里面加上事件就可以啦 top 和left 是用来设定位置的

HTML选项卡怎么使用？

进入“Internet选项”窗口，选择“常规”选项卡，点击“选项卡”对话框下面的“设置”按钮，在“选项卡浏览设置”窗口下的“遇到弹出窗口时：”对话框里点选“始终在新窗口中打开弹出窗口”，在“从位于以下位置的其它程序打开链接”下选择“新窗口”，确定退出即可。 此外，你还可以用鼠标中间那个滑轮点连接，又或者按住键盘上的“Ctrl”键再去点连接。

分享文章：html5选项卡,HTML选项卡
文章来源：http://kswjz.com/article/dsehcps.html