问征夫以前路
感谢所有关心过支持过我的人， 感谢所有恨过我嘲笑过我的人 ！
posts - 23,comments - 65,trackbacks - 0
页签实例

        在网上找了好久的页签实例，终于找到一个可以用的html格式的页签！贴上来，以做备用！

  1<HTML>
  2<style>   
  3  body   {font-size:12px;font-family:宋体}   
  4  ul.TabBarLevel1{   
  5  list-style:none;   
  6  margin:0;   
  7  padding:0;   
  8  height:29px;
  9 
 10  }   
 11  ul.TabBarLevel1   li{   
 12  float:left;   
 13  padding:0;   
 14  height:29px;   
 15  margin-right:1px;   
 16  background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif)   left   top   no-repeat;   
 17  }   
 18  ul.TabBarLevel1   li   a{   
 19  display:block;   
 20  line-height:29px;   
 21  padding:0   20px;   
 22  color:#333;   
 23  background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif)   right   top   no-repeat;   
 24  white-space:   nowrap;   
 25  }   
 26  ul.TabBarLevel1   li.Selected{   
 27  background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif)   left   top   no-repeat;   
 28  }   
 29  ul.TabBarLevel1   li.Selected   a{   
 30  background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif)   right   top   no-repeat;   
 31  }   
 32    
 33  ul.TabBarLevel1   li   a:link,ul.TabBarLevel1   li   a:visited{   
 34  color:#333;   
 35  }   
 36  ul.TabBarLevel1   li   a:hover,ul.TabBarLevel1   li   a:active{   
 37  color:#F30;   
 38  text-decoration:none;   
 39  }   
 40  ul.TabBarLevel1   li.Selected   a:link,ul.TabBarLevel1   li.Selected   a:visited{   
 41  color:#000;   
 42  }   
 43  ul.TabBarLevel1   li.Selected   a:hover,ul.TabBarLevel1   li.Selected   a:active{   
 44  color:#F30;   
 45  text-decoration:none;   
 46  }   
 47  div.HackBox   {   
 48      padding   :   2px   2px   ;   
 49      border-left:   2px   solid   #6697CD;   
 50      border-right:   2px   solid   #6697CD;   
 51      border-bottom:   2px   solid   #6697CD;   
 52   height:200px;
 53   width:359px;
 54      display:none;   
 55  }   
 56    
 57  </style>   
 58    
 59    
 60    
 61  <div   id="Whatever">   
 62  <ul   class="TabBarLevel1"   id="TabPage1">   
 63  <li   id="Tab1" class="Selected"><a   href="#"   onMouseover="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li>   
 64  <li     id="Tab2"><a   href="#"   onMouseover="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li>   
 65  <li     id="Tab3"><a   href="#"   onMouseover="javascript:switchTab('TabPage1','Tab3');"><B><font   color="#22FF22">知</font><font   color="#FF2222">往</font><font   color="#001199">观</font><font   color="#00fffa">来</font></B></a></li>   
 66  <li     id="Tab4"><a   href="#"   onMouseover="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li>   
 67  </ul>   
 68  <div   id="cnt">   
 69  <div   id="dTab1"   class="HackBox">我为每一次的快乐而哭泣，我为每一次的悲伤而微笑。   
 70  </div>   
 71  <div   id="dTab2"   class="HackBox"   style="display:block">【※卡秀儿精品屋※】   
 72    
 73  </div>   
 74  <div   id="dTab3"   class="HackBox">学习是件头疼的事，为了能活下去我不得不学习   
 75    
 76  </div>   
 77  <div   id="dTab4"   class="HackBox">仍然拣尽寒枝不肯安歇   微带着后悔   寂寞沙洲我该思念谁   
 78  </div>   
 79  </div>   
 80  </div>   
 81  <script   language="JavaScript">   
 82  //Switch   Tab   Effect   
 83  function   switchTab(tabpage,tabid){   
 84                  var   oItem   =   document.getElementById(tabpage);         
 85  for(var   i=0;i<oItem.children.length;i++){   
 86  var   x   =   oItem.children(i);   
 87  x.className   =   "";   
 88  var   y   =   x.getElementsByTagName('a');   
 89  y[0].style.color="#333333";   
 90  }   
 91  document.getElementById(tabid).className   =   "Selected";   
 92  var   dvs=document.getElementById("cnt").getElementsByTagName("div");   
 93  for   (var   i=0;i<dvs.length;i++){   
 94      if   (dvs[i].id==('d'+tabid))   
 95          dvs[i].style.display='block';   
 96      else   
 97          dvs[i].style.display='none';   
 98  }   
 99  }   
100    
101  </script>
102</HTML> 
103
104
posted on 2008-06-03 13:59 kenzhang 阅读(102) 评论(0)  编辑  收藏

标题  
姓名  
主页
验证码 *  
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
 
 
相关链接:
网站导航:



Copyright ©2008 kenzhang Powered By博客园 模板提供：沪江博客