html鼠标自动左右切换,鼠标hover时tab自动切换

tab是经常用到的一项技术，其原理并不难啊，过程大致可以分为三步：

1)获取导航区的标签并将其存放于一个数组中

2)获取显示区的标签并将其存放于另一数组中

3)事件处理：显示导航区对应的内容，其他不相关内容隐藏掉

上面三步是用js来实现的

function setTab(n){

var tabs=document.getElementById("navs").getElementsByTagName("li");

var show=document.getElementById("main").getElementsByTagName("div");

for(var i=0;i

if(i==n){

tabs[i].className="nav_bar";

show[i].className="main_bar";

}else{

tabs[i].className=" ";

show[i].className=" ";

}

}

}

上面的js逻辑部分实现了，剩下的就是html和css部分了

html代码如下

html>

TAB实现自动切换

TAB实现自动切换

标题一标题二标题三标题四

很多时候一个元素的样式并非直接对元素定义，而是对其祖先元素定义，然后通过继承性得到样式。例如，在body中定义的文字的颜色(color)属性，在p元素中也是有效的。这就是样式的继承。

例如：在body中定义了字体的大小，元素p的属性style中定义了文字颜色，内部样式表和外部样式表中也都定义了元素p的文字颜色，而且某段文字还用属性id和类名都定义了文字颜色。这样会导致复杂的样式层叠关系，到底谁可以起作用呢？

 如果一个元素被具有相同属性名的多个样式重复作用，也就是出现了样式层叠，CSS需要通过这些样式的选择器的特殊性来进行选择其中的一个样式。选择器越特殊优先权越高，选择器优先权最高的样式被选中。如果最高优先权的有多个，则要看这些样式中哪个样式离这个元素最近，离得最近的被选中

 盒子模型是css的核心，也是网页设计的核心内容，基本上所有的网页都有用到盒子模型。每个盒子都有border，margin，padding和content四个属性，但是盒子模型有两种不同的解释：标准W3C盒子模型和IE6盒子模型。

css代码如下

#header{

width: 603px;

text-align: center;

margin: 0 auto;

}

#content{

margin: 0 auto;

width: 603px;

height: 403px;

}

li{

float: left;

width: 150px;

height: 30px;

line-height: 30px;

text-align: center;

list-style: none;

cursor: pointer;

}

li.nav_bar{

background-color: #ccc;

border-left:1px solid #ccc;

border-top:1px solid #ccc;

border-right:1px solid #ccc;

}

#main div{

width: 600px;

height: 370px;

clear: left;

border: solid 1px #ccc;

display: none;

}

#main div.main_bar{

display: block;

text-indent: 2em;

}

.nav_bar,.main_bar{

background-color: #ccc

}

最终浏览器显示结果如下