正文
html5选项卡,HTML选项卡
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html 选项卡切换内容如何实现
html 选项卡切换内容方法：
工具/原料
网页编辑器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
相关问答
Q1: 请问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 是用来设定位置的
Q2: HTML选项卡怎么使用？
进入“Internet选项”窗口，选择“常规”选项卡，点击“选项卡”对话框下面的“设置”按钮，在“选项卡浏览设置”窗口下的“遇到弹出窗口时：”对话框里点选“始终在新窗口中打开弹出窗口”，在“从位于以下位置的其它程序打开链接”下选择“新窗口”，确定退出即可。 此外，你还可以用鼠标中间那个滑轮点连接，又或者按住键盘上的“Ctrl”键再去点连接。
