BlogJava-ohgrateboy-文章分类-HTML设计http://www.blogjava.net/ohgrateboy/category/45566.htmlzh-cnWed, 14 Jul 2010 08:55:55 GMTWed, 14 Jul 2010 08:55:55 GMT60简单html实现tabhttp://www.blogjava.net/ohgrateboy/articles/325896.htmlohgrateboyohgrateboyMon, 12 Jul 2010 09:11:00 GMThttp://www.blogjava.net/ohgrateboy/articles/325896.htmlhttp://www.blogjava.net/ohgrateboy/comments/325896.htmlhttp://www.blogjava.net/ohgrateboy/articles/325896.html#Feedback0http://www.blogjava.net/ohgrateboy/comments/commentRss/325896.htmlhttp://www.blogjava.net/ohgrateboy/services/trackbacks/325896.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  .tabnav ul{margin:0;padding:0;list-style:none;}
  .tabnav li{padding:5 10px;border:1px solid red;float:left;}
  .tabid {border:1px solid #000;clear:both;}
  </style>
  <script language='javascript'>
  var temp = "tabid2";
  function changeTab(n){
      var tabnav = "tab"+n;
      var tabid = "tabid"+n;
      if(temp != tabid){
        clearDislay(temp);
        temp =tabid;
    }
      document.getElementById(tabid).style.display="block";
  };
  function clearDislay(tab){
      var clearTabid = tab;
      document.getElementById(clearTabid).style.display = "none";
  }
  </script>
 </HEAD>

 <BODY>
 <div>
  <div class='tabnav'>
 <ul>
  <li id='tab1' onclick='changeTab(1)'>TAB1</li>
  <li id='tab2' onclick='changeTab(2)'>TAB2</li>
 </ul>
  </div>
  <div id='tabid1' class='tabid'>tab1</div>
  <div id='tabid2' class='tabid' style='display:none;'>tab2</div>
  </div>
 </BODY>
</HTML>

ohgrateboy 2010-07-12 17:11 发表评论
]]>