選項卡切換的新聞列表效果代碼實例:利用選項卡切換的新聞列表在很多網站都有應用，當然優點也是不言而喻的，利用更小的空間可以容納更多的新聞內容，並且也容易組織分類效果，下麵就是一個這樣的代碼實例，下麵就介紹一下它的實現過程。代碼如下:螞蟻部落 螞蟻部落一 螞蟻部落二 ...
選項卡切換的新聞列表效果代碼實例:
利用選項卡切換的新聞列表在很多網站都有應用，當然優點也是不言而喻的，利用更小的空間可以容納更多的新聞內容，並且也容易組織分類效果，下麵就是一個這樣的代碼實例，下麵就介紹一下它的實現過程。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body { margin:0px; padding:0px; } #main { width:310px; border:1px solid #C8C8CC; margin-left:auto; margin-right:auto; margin-top:50px; } .main_title { width:310px; border-bottom:1px solid #C8C8CC; height:30px; } #main div .chang { border:1px solid #C8C8CC; float:left; width:153px; height:26px; text-align:center; padding-top:4px; cursor:pointer; } .main_head { width:310px; height:25px; background-color:#FFF4F8; } .main_head font { font-size:13px; color:#808080; margin-top:5px; } .main_content { width:310px; border-top:1px solid #808080; } .main_content ul { margin-left:-30px; margin-top:5px; width:290px; } .main_content ul li { list-style-type:none; font-size:13px; color:#2464B2; border-bottom:1px dotted #808080; line-height:27px; } .main_content ul li a { font-size:13px; color:#2464B2; text-decoration:none; } .main_content ul li a:hover{text-decoration:underline;} #main div ul.main_content_chang { width:290px; position:relative; z-index:100; top:0px; left:0px; display:block; } #main div ul { position:relative; display:none; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $(".chang").each(function(index){ $(this).click(function(){ $(this).css("background-color","#E02D29"); $(this).siblings("div").css("background-color","#fff"); $("#main div ul").removeClass("main_content_chang"); $(".main_content ul:eq("+index+")").show().siblings("ul").hide(); }) }) }) </script> </head> <body> <div id="main"> <div class="main_title"> <div class="chang" style="background:#E02D29">螞蟻部落一</div> <div class="chang" style="float:right;">螞蟻部落二</div> </div> <div class="main_content"> <ul class="main_content_chang"> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落一</a></li> <li style="text-align:right; border-bottom-style:none"> <a href="#" style="font-size:15px">查看更多新聞</a> </li> </ul> <ul> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落二</a></li> <li style="text-align:right; border-bottom-style:none"> <a href="#" style="font-size:15px">查看更多新聞</a> </li> </ul> </div> </div> </body> </html>
以上代碼實現了我們的要求，點擊頂部選項卡可以實現新聞列表的切換效果，下麵介紹一下它的實現過程。
一.代碼註釋:
1.$(function(){})，當穩當結構完全載入完畢再去執行函數中的代碼。
2.$(".chang").each(function(index){}）,獲取class屬性值為chang的元素集合，並且以集合中的每一個DOM元素作為上下文去執行函數，index是當前DOM元素在集合中的索引位置。
3.$(this).click(function(){})，為當前元素註冊click事件處理函數，也就是為每一個標題註冊click事件處理函數。
4.$(this).css("background-color","#E02D29")，設置當前被點擊標題的背景顏色。
5.$(this).siblings("div").css("background-color","#fff")，將它的兄弟div元素的背景顏色設置為#fff，也就是只允許被點擊的元素背景色為","#E02D29。
6.$(".main_content ul:eq("+index+")").show().siblings("ul").hide()，當前被點擊的標題索引和要顯示的新聞列表ul元素的索引是對應的，所以本語句就是將當前被點擊標題對應索引的新聞列表顯示處理，然後將它的兄弟ul元素隱藏（也就是另一個新聞列表ul）。
二.相關閱讀:
1.each()函數可以參閱jQuery.each()方法一章節。
2.this可以參閱javascript的this用法詳解一章節。
3.click事件可以參閱jQuery的click事件一章節。
4.css()函數可以參閱jQuery的css()方法一章節。
5.siblings()函數可以參閱jQuery的siblings()方法一章節。
6.eq選擇器可以參閱jQuery的:eq()選擇器一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11753
更多內容可以參閱:http://www.softwhy.com/jquery/
