js实现经典实用tab选项卡切换特效-网页编程网

当前位置：主页 >> 网页特效 >> 正文

js实现经典实用tab选项卡切换特效

阅读：5048 输入：2016-11-26 15:30:28

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>网页特效 经典实用tab选显卡特效 </title>
<style type="text/css">
*{margin: 0; padding: 0; }
li{ list-style: none; }
.net{ width: 154px; margin: 100px auto; }
#wnet_l{ width: 154px; height: 30px; }
#wnet_l li { float: left; width: 75px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #333; border-bottom: none; }
#wnet_l li.on { background: #333; color: #fff; }
#wnet_r{ width: 152px; height: 50px; border: 1px solid #ddd; border-top: 1px solid #333; }
#wnet_r p { display: none; line-height: 50px; }
</style>
</head>
<body>
<div class="net">
 <ul id="wnet_l">
  <li class="on">一号选项</li>
  <li>二号选项</li>
 </ul>
 <div id="wnet_r">
  <p style="display: block;">站长特效一号选项卡</p>
  <p>站长特效二号选项卡</p>
 </div>
</div>
<script type="text/javascript">
new function(){
 var t = document.getElementById("wnet_l").getElementsByTagName("li");
 var c = document.getElementById("wnet_r").getElementsByTagName("p");
 var l = t.length;
 var last_cap = t[0];
 for(var i=0;i<l;i++) init_tab(t[i], c[i]);
 function init_tab(cap, body){
  cap.onmouseover=function(){
   if (last_cap) last_cap.deactive();
   (last_cap = cap).className="on"; body.style.display = "block";
  }
  cap.deactive = function(){ this.className=""; body.style.display="none"; }
 }
}
</script>
</body>
</html>

相关阅读: 纯js滑动选项卡代码; [精]JavaScript实现Tab选项卡切换; 用css+js实现选项卡切换效果，个数动态获取