结构行为分离实现选项卡切换效果-JS特效-爱易网页

结构行为分离实现选项卡切换效果

日期：2014-05-18　浏览次数：20197 次

以下是程序代码

<!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" xml:lang="en">
<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; }
  .warp { width: 154px; margin: 100px auto; }
  #tt { width: 154px; height: 30px; }
  #tt li { float: left; width: 75px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #333; border-bottom: none; }
  #tt li.on { background: #333; color: #fff; }
  #tc { width: 152px; height: 50px; border: 1px solid #ddd; border-top: 1px solid #333; }
  #tc p { display: none; line-height: 50px; }
 </style>
</head>
<body>
<div class="warp">
 <ul id="tt">
  <li class="on">t1</li>
  <li>t2</li>
 </ul>
 <div id="tc">
  <p style="display: block;">tc111111</p>
  <p>tc222222</p>
 </div>
</div>
<script type="text/javascript">
new function(){
 var t = document.getElementById("tt").getElementsByTagName("li");
 var c = document.getElementById("tc").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.onclick=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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]