jQuery之選項卡的簡單實現

 本篇文章主要是對jQuery 選項卡的簡單實現進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

jQuery實現選項卡功能。首先將界面搭建好。   有導航頭tab_menu，還有內容tab_box。   要實現的效果就是，點擊後，將相應的內容顯示出來，其他內容隱藏掉。   同時為了展現選中狀態，為選中的項添加背景，以示區別。   這一次，我自己寫了代碼，先看html部分：    代碼如下: <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>   html中，需要一個大的div，裡面有兩個子div，一個作為導航頭tab_menu，一個作為內容體tab_box。css代碼負責布局html內容。   css部分：    代碼如下: *{ margin:0; padding:0; } .tab{     width:240px;     margin:50px;     /*border:1px solid;*/ } .tab_menu{     clear:both; } .tab_menu li{     float:left;  //將導航頭左飄     text-align:center;  //將文字居中     list-style:none;  //去除標記符號     background:#F1F1F1; //設置默認背景色     border:1px solid #898989; //設置邊框色     margin-right:4px; //每個li之間的距離為4px     cursor:pointer;  //鼠標浮上之後，會有小手的標示出現     padding:1px 6px; //控制li的內部距離     border-bottom:none;    } .tab_menu li.hover{     background:#DFDFDF; } .tab_menu li.selected{//為選中的選項加背景與顏色     color:#FFF;      background:#6D84B4; } .tab_box{     clear:both; //清楚float效果的影響     height:100px; //設置高度為100px     border:1px solid #898989; //設置內容體的邊框樣式 } .hide{//隱藏需要隱藏的內容div     display:none; }   待布局完成之後，進行jQuery的動作：  代碼如下: <script type='text/javascript'> $(function(){     //1.點擊時改變css屬性，移除之前的selected選項，添加新的selected選項     //2.隱藏之前的div層，顯示對應得div層     //為導航中的li注冊點擊事件     var $div_li = $(".tab_menu ul li");     $div_li.click(function(){         $(this).addClass('selected').siblings().removeClass('selected');         //var index = $div_li.index(this);         //$("div.tab_box > div").eq(index).show().siblings().hide();         var text = $(this).text();         if(text=='時事')         {             $('.tab_box div:contains("時事")').removeClass('hide').siblings().addClass('hide');         }         if(text=='體育')         {             $('.tab_box div:contains("體育")').removeClass('hide').siblings().addClass('hide');         }         if(text=='娛樂')         {             $('.tab_box div:contains("娛樂")').removeClass('hide').siblings().addClass('hide');         }     }).hover(function(){             $(this).addClass("hover");         },function(){             $(this).removeClass("hover");         }); }); </script>   這是我寫的jQuery代碼，我的思路是，點擊選項卡時，添加selected樣式，同時移除兄弟選項卡的selected樣式。   再一個，如何才能觸發相應的tab_box中的內容的隱藏與顯示呢？   我發現了他們有相對應的內容，就是選項頭為“實事”的對應的選項體也為“實事”，選項頭為“體育”的對應的選項提也為“體育”等。   我就想，先獲取選項頭的內容，做出判斷，當它為不同的值時，就觸發不同的效果。   效果是實現了，可是漏洞很明顯，因為並不是所有的選項卡都是標題與內容體相對應。   再看看下面的代碼： 代碼如下: <script type="text/javascript" > //<![CDATA[     $(function(){         var $div_li =$("div.tab_menu ul li");         $div_li.click(function(){             $(this).addClass("selected")            //當前<li>元素高亮                    .siblings().removeClass("selected");  //去掉其它同輩<li>元素的高亮             var index =  $div_li.index(this);  // 獲取當前點擊的<li>元素 在 全部li元素中的索引。             $("div.tab_box > div")       //選取子節點。不選取子節點的話，會引起錯誤。如果裡面還有div                      .eq(index).show()   //顯示 <li>元素對應的<div>元素                     .siblings().hide(); //隱藏其它幾個同輩的<div>元素         })     }) //]]> </script>   這裡的處理就特別的巧妙，它通過獲取li的索引，對選項體進行處理。它巧妙的利用了一個隱藏的對應關系，就是索引值。   這樣即便選項頭與選項體內容不對應，一樣可以實現聯動效果。   通過這次練習，我覺得，自己先動腦子想一想還是很好的。可以發現思路的差異，才能夠發現不足，知道差距。有時候甚至你的思路會更好呢!