比如：<BODY>
<a href="#" onmouseover="javascript:mydiv.style.display='inline'" onmouseout="javascript:mydiv.style.display='none'">鼠标放上来</a>
<br>
<div id="mydiv" style="display:nonetop=200left=200">我显示出来了</div>
</BODY>
你把链接改为你的选项卡 在里面加上事件就可以啦 top 和left 是用来设定位置的
html 选项卡切换内容方法：
工具/原料
网页编辑器dreamweaver
javascript中的getElementById和getElementsByTagName方法
*** 作步骤：
1、三个DIV形成的版块只会显示第三个汽车的内容。
二、制作过程
1、 制作HTML结构框架
2、完成对应CSS的输入，使页面形成特定布局
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</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>
<button>2</button>
<button>3</button>
<button>4</button>
<div style="display:block">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script type="text/javascript">
var buttonArr = document.getElementsByTagName("button")
var divArr = document.getElementsByTagName("div")
for(var i = 0 i < buttonArr.lengthi++) {
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">
<title>tab</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>
<div>2</div>
<div>3</div>
<div>4</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.lengthj++) {
buttonList[j].className = ""
divList[j].className = ""
}
this.className = "btn-active"
divList[this.index].className = "div-active"
}
}
</script>
</body>
</html>
4、完整代码：
<!DOCTYPE html><html><head 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:5pxheight:150pxmargin:20px}
#tab ul{list-style:none display:height:30pxline-height:30px border-bottom:2px #C88 solid}
#tab ul li{background:#FFFcursor:pointerfloat:leftlist-style:none height:29px line-height:29pxpadding: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:100pxwidth:250px line-height:24pxborder-top:none padding:1px border:1px solid #336699padding: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 i<myLi.lengthi++){
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></head><body><!-- 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</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab/a><br/>
<a href = "#">切换代码tab</a><br/>
</div>
<div id="secondPage" class="show">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
</div>
<div id="thirdPage" class = "hide">
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
<a href = "#">切换代码tab</a><br/>
</div></div></body></html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）