您的位置：首页 > Web前端 > JavaScript

简单纯js实现网页tab选项卡切换效果

2017-04-17 10:49 399 查看

tab选项卡切换效果是在网页中的常见效果，实现它的方法也很简单。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单纯js实现网页tab选项卡切换效果</title>
<style>
*{margin:0;padding:0;}
body{font-size:14px;font-family:"Microsoft YaHei";}
ul,li{list-style:none;}

#tab{position:relative;}
#tab .tabList ul li{
float:left;
background:#fefefe;
background:-moz-linear-gradient(top, #fefefe, #ededed);
background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
border:1px solid #ccc;
padding:5px 0;
width:100px;
text-align:center;
margin-left:-1px;
position:relative;
cursor:pointer;
}
#tab .tabCon{
position:absolute;
left:-1px;
top:32px;
border:1px solid #ccc;
border-top:none;
width:403px;
height:100px;
}
#tab .tabCon div{
padding:10px;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
}
#tab .tabList li.cur{
border-bottom:none;
background:#fff;
}
#tab .tabCon div.cur{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>


<div id="tab" style="margin-left:460px;margin-top:20px">
<div class="tabList">
<ul>
<li class="cur">许嵩</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div class="tabCon">
<div class="cur">断桥残雪、千百度、幻听、想象之中</div>
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
<div>被风吹过的夏天、江南、一千年以后</div>
<div>十年、K歌之王、浮夸</div>
</div>
</div>

<script>
window.onload = function() {
var oDiv = document.getElementById("tab");
var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
var timer = null;
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;
oLi[i].onmouseover = function() {
show(this.index);
}
}
function show(a) {
index = a;
var alpha = 0;
for (var j = 0; j < oLi.length; j++) {
oLi[j].className = "";
aCon[j].className = "";
aCon[j].style.opacity = 0;
aCon[j].style.filter = "alpha(opacity=0)";
}
oLi[index].className = "cur";
clearInterval(timer);
timer = setInterval(function() {
alpha += 2;
alpha > 100 && (alpha = 100);
aCon[index].style.opacity = alpha / 100;
aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
alpha == 100 && clearInterval(timer);
},
5)
}
}
</script>


</body>
</html>
程序运行结果：

background: -moz-linear-gradient(top, #f00, #0f0);

//从上到下，由红变绿

linear-gradient属性存在兼容性问题

opacity:0;

不透明度为0，即完全透明

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

两个非零数字相与(&&)，返回&&号后面的那个数字

负数与零相与(&&)，返回0

正数与零相与(&&)，返回0

alert(-5 > -2 && 5);//先计算> 后计算&& 大小运算符的优先级高于逻辑运算符

false && 0 //false

0 && false //0

负数与false相与(&&)，返回false

正数与false相与(&&)，返回false

参考文献：
http://www.lanrenzhijia.com/tab/2846.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航