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

来源：互联网发布：淘宝客优惠券链接地址编辑：程序博客网时间：2024/05/14 07:32

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><!-- 代码 begin --><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><!-- 代码 en --></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

1 0