您的位置：首页 > 其它

鼠标hover时tab自动切换

2016-03-14 10:43 459 查看

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

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

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

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

上面三步是用js来实现的

<script type="text/javascript">
function setTab(n){
var tabs=document.getElementById("navs").getElementsByTagName("li");
var show=document.getElementById("main").getElementsByTagName("div");
for(var i=0;i<tabs.length;i++){
if(i==n){
tabs[i].className="nav_bar";
show[i].className="main_bar";
}else{
tabs[i].className=" ";
show[i].className=" ";
}
} 
}
</script>

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

html代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TAB实现自动切换</title>
</head>
<body>
<div id="header">
<h1>TAB实现自动切换</h1>
</div>
<div id="content">
<div id="navs">
<li onmousemove="setTab(0)">标题一</li>
<li onmousemove ="setTab(1)">标题二</li>
<li onmousemove ="setTab(2)">标题三</li>
<li onmousemove ="setTab(3)">标题四</li>
</div>
<div id="main">
<div>很多时候一个元素的样式并非直接对元素定义，而是对其祖先元素定义，然后通过继承性得到样式。例如，在body中定义的文字的颜色（color）属性，在p元素中也是有效的。这就是样式的继承。</div>
<div>例如：在body中定义了字体的大小，元素p的属性style中定义了文字颜色，内部样式表和外部样式表中也都定义了元素p的文字颜色，而且某段文字还用属性id和类名都定义了文字颜色。这样会导致复杂的样式层叠关系，到底谁可以起作用呢？</div>
<div> 如果一个元素被具有相同属性名的多个样式重复作用，也就是出现了样式层叠，CSS需要通过这些样式的选择器的特殊性来进行选择其中的一个样式。选择器越特殊优先权越高，选择器优先权最高的样式被选中。如果最高优先权的有多个，则要看这些样式中哪个样式离这个元素最近，离得最近的被选中</div>
<div> 盒子模型是css的核心，也是网页设计的核心内容，基本上所有的网页都有用到盒子模型。每个盒子都有border，margin，padding和content四个属性，但是盒子模型有两种不同的解释：标准W3C盒子模型和IE6盒子模型。</div>
</div>
</div>
</body>
</html>

css代码如下

<style type="text/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
}
</style>

最终浏览器显示结果如下


(adsbygoogle = window.adsbygoogle || []).push({});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Tab
相关文章推荐
新的分享
章节导航