.js footer 点击切换。用到的是 sohuo/c.js

来源：互联网发布：软件总体设计文档编辑：程序博客网时间：2024/04/27 11:10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><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><style>.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;}</style><div class="baidu_ads"><script type="text/javascript">var sogou_ad_id=395091;var sogou_ad_height=90;var sogou_ad_width=960;</script><script type='text/javascript' src='c.js'></script></div><span style="display:none;"></span><!-- 代码 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>
0 0
.js footer 点击切换。 用到的是 sohuo/c.js

.js footer 点击切换。用到的是 sohuo/c.js
