1、利用css的:hover
<div id="content">这是原本的div层
<div id="show">
<p>这是鼠标移动上去后的div层</p>
</div>
</div>
<style type="text/css">
*{
margin: 0
padding: 0
}
#content{
background:#0CF
height:200px
width:200px
margin-left: 20px
margin-top: 20px
}
#show{
width:200px
height:200px
margin-top: 20px
background:#F09
top:0px
position:absolute
opacity: 0
display: block
font-size: 12px
transition: 0.3s
-webkit-transition: .5s
-moz-transition: .5s
}
#content:hover #show{
color: #656e73
opacity: 1
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
/*为什么要这样定义样式，而不用#cardBar ul 这样定义，我个人的猜测是因为类是就近原则获取样式，而#cardBar ul则不是就近原则，按标签来定义，因此.Selected样式就无法出现。*/
*{
margin:0px
padding:0px
text-decoration:none
}
/*定义基本样式*/
ul.cardUl{
font-size:12px
list-style-type:none
text-align:center
height:29px
background-image:url(attachments/month_0706/2200764172315.gif)
}
/*默认样式下使用css文件*/
ul.cardUl li{
height:29px
background:url(attachments/month_0706/u200764172418.gif) left top no-repeat
float:left
margin-right:1px
padding-left:6px/*另一边提供空间*/
}
ul.cardUl li a{
float:left
height:29px
background:url(attachments/month_0706/y200764172443.gif) right top no-repeat
display:block
padding:8px 8px 3px 4px/*让文字能够够居中*/
color:#333
white-space: nowrap
}
/*文字点击使用CSS*/
ul.cardUl li.Selected{
background:url(attachments/month_0706/g20076417255.gif) left top no-repeat
}
ul.cardUl li.Selected a{
background:url(attachments/month_0706/z200764172528.gif) right top no-repeat
}
/*对点击下栏显示边框的代码进行美化*/
div.hackBox{
padding:2px 2px
border-left:2px solid #6697CD
border-right:2px solid #6697CD
border-bottom:2px solid #6697CD
display:none
}
</style>
<script>
//为选项卡的默认值进行设定，方法为读取cardBar里面的li标签是否已经有selected属性，如果没有则使用默认值。
function loadTab(){
//读取cardBar下面所有li标签
var getId=document.getElementById("cardBar").getElementsByTagName("li")
//定义一个判断是否有selected的变量
var selectedItems=0
//判断方法，循环读出li标签的className，如果有则selectedItems加1
for(i=0i<getId.lengthi++){
if (getId[i].className == "Selected"){
selectedItems+=1
}
}
//经过循环，如果selectedItems没有数值，那么说明没有selected的标签，因此给标签加上默认的className
if (selectedItems==0){
document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected"
document.getElementById("Dcard1").style.display="block"
}
}
//让窗口打开就运行他
window.onload=loadTab
//设定结束
//进行选项卡效果的触发
function switchTab(cardBar,cardId){
//读取cardBar下面所有li标签
var oItems = document.getElementById(cardBar).getElementsByTagName("li")
//循环清空li标签下面的selected效果
for (i=0i<oItems.lengthi++ ){
var x=oItems[i]
x.className=""
var y=x.getElementsByTagName("a")
y[0].style.color="#333"
}
//开始选项卡效果的赋值，为选中的li标签增加selected类的属性
document.getElementById(cardId).className="Selected"
//读出cardContent 下面的所有div标签
var dvs=document.getElementById("cardContent").getElementsByTagName("div")
//循环，判断应该显示的div
for (i=0i<dvs.lengthi++ ){
if (dvs[i].id==("D"+cardId)){
dvs[i].style.display="block"
}else{
dvs[i].style.display="none"
}
}
}
</script>
<BODY>
<div id="aa">
<ul class="cardUl" id="cardBar">
<li id="card1"><a href="#" onclick="javascript:switchTab('cardBar','card1')">第一选项</a></li>
<li id="card2"><a href="#" onclick="javascript:switchTab('cardBar','card2')">第二选项</a></li>
<li id="card3"><a href="#" onclick="javascript:switchTab('cardBar','card3')">第三选项</a></li>
<li id="card4"><a href="#" onclick="javascript:switchTab('cardBar','card4')">第四选项</a></li>
</ul>
<div id="cardContent">
<div id="Dcard1" class="hackBox">代码一</div>
<div id="Dcard2" class="hackBox"">代码二</div>
<div id="Dcard3" class="hackBox">代码三</div>
<div id="Dcard4" class="hackBox">代码四</div>
</div>
</div>
</BODY>
</HTML>
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>
