如何用原生javascript实现TAB切换
2016-04-28 本文已影响1213人
牛油果大虾
tab切换在各大主流页面有广泛的应用,今天来分享一个用原生js来实现类似京东购物边栏的TAB.
首先以下是一段边栏HTML框架代码
<body>
<div class="wrap">
<div id="left">
<ul id="leftList">
<li>家电</li>
<li>手机</li>
<li>男装</li>
<li>女装</li>
<li>吃的</li>
</ul>
</div>
<div id="right">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
</div>
</body>
然后是css样式代码
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
.wrap {
width: 1000px;
height: 252px;
overflow: hidden;
}
#left {
width: 200px;
height: 100%;
background-color: red;
border: 1px solid red;
box-sizing: border-box;
float: left;
}
#right {
width: 800px;
height: 100%;
background-color: yellow;
border: 1px solid red;
border-left-style: none;
float: right;
box-sizing: border-box;
display: none;
}
#leftList {
list-style: none;
}
li {
width: 100%;
height: 50px;
background-color: red;
color: white;
text-indent: 2em;
line-height: 50px;
}
.current {
background-color: white;
color: red;
border-right-style: none;
border-left: 1px solid red;
}
#right div {
width: 100%;
height: 100%;
background-color: #CCCCCC;
text-align: center;
font-size: 100px;
display: none;
}
.show {
display: block;
}
</style>
此时效果如下
此处要注意一下 因为当你的鼠标没有移到左侧时,他不会激发对应的内容,所以css样式部分
#right置为none.下面重点到了js部分,首先我们分析一下逻辑顺序,如要实现效果应该有以下几个方面
- 鼠标移到左侧div时弹出对应的右侧内容
- 鼠标从左侧移出到右侧后,右侧内容不消失
- 鼠标移出左右侧后右侧内容消失
然后我们根据js语句主要的三部分(获取变量.操作.定义函数)来写js部分
首先定义变量,即
/***** 变量 *****/
var leftDiv = document.getElementById("left");
var rightDiv = document.getElementById("right");
// 获取左侧列表
var lis = document.getElementsByTagName("li");
var divs = document.querySelectorAll("#right>div");
// 临时变量 保存定时器(负责清除)
var timer = null;
此处需要强调因为要有一个延时的效果,我们定义了一个定时器,即变量中的
var timer = null;
然后进行操作
/***** 操作 *****/
// tab切换
for (var i = 0; i < lis.length; i++) {
lis[i].biaoji = i;
lis[i].onmouseover = function() {
for (var j = 0; j < divs.length; j++) {
lis[j].className = "";
divs[j].style.display = "none";
}
this.className = "current";
divs[this.biaoji].style.display = "block";
}
}
leftDiv.onmouseover = function() {
// 鼠标停留在左div时 干掉定时器
clearInterval(timer);
rightDiv.style.display = "block";
}
leftDiv.onmouseout = function() {
// 当鼠标离开左div时 创建定时器 0.5s后清空样式
timer = setTimeout(function() {
rightDiv.style.display = "none";
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
}, 500);
}
rightDiv.onmouseover = function() {
// 利用时间差 当鼠标从左div 移入右div时
// 先干掉定时器 保留刚才的效果
clearTimeout(timer);
this.style.display = "block";
}
rightDiv.onmouseout = function() {
// 当鼠标从右侧div离开时 清除样式
timer = setTimeout(function() {
rightDiv.style.display = "none";
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
}, 500);
}
如果要实现更多个对象的处理为了代码简洁我们可以把其中相同的部分提出来封装成函数使用时再调用就可以了.
实现效果如下
