JS实现的选项卡切换
2016-01-02 09:49
666 查看
<!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=utf-8" /> <title>test</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">菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> </ul> </div> <div class="tabCon"> <div class="cur">内容11111111111111111111111111</div> <div>内容222222222222222222222222222</div> <div>内容33333333333333333333333</div> <div>内容4444444444444444444444444444</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>
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 用CSS开发时髦的导航栏图例教程
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- node.js抓取并分析网页内容有无特殊内容的js文件
- PHP+JS实现大规模数据提交的方法
- 仿51JOB的地区选择效果(可选择多个地区)