於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();
             });
      });