于jQuery+CSS制作的选项卡

现在看锋利的jquery....受益非浅....下面的这个..算是课堂笔记了...需要的同学可以拿了救急....

css部分

    <style type="text/css">
 .hide{display:none;}
  ul{list-style:none;}
  li{width:120px; float:left;}
 .tab_box div{border:1px solid #A0A0A4; width:500px; /*text-align:ecnter;*/ height:100px; line-height:100px;}
 .tab_menu{width:500px; height:20px;}
 .tab_box{ margin:1px 0 0 0;}
 .selected{padding:2px 2px 0 2px; background-color:#808080; border-bottom:1px solid  #808080;}

  /*border-bottom:1px solid  #808080---这个很重要..兼容FF与IE8...如果不加这个FF会有1px的空白...*/
</style>

div 部分

  <div class="tab">
       <div class="tab_menu">
         <ul>
             <li class="selected">时事</li>
                <li>体育</li>
                <li>娱乐</li>
            </ul>
       </div>
      <div  class="tab_box">
         <div>时事</div>
            <div  class="hide">体育</div>
            <div  class="hide">娱乐</div>
        </div>
   </div>  

jQuery部分

$(function(){
        var $div_li=$("div.tab_menu ul li");
     
     var $div   =$("div.tab_box>div");
     $div_li.click(function(){
               $(this).addClass("selected").siblings().removeClass("selected");
            var index=$div_li.index(this);
            $div.eq(index).show().siblings().hide();
             });
      });