选项卡切换的新闻列表效果代码实例:
利用选项卡切换的新闻列表在很多网站都有应用，当然优点也是不言而喻的，利用更小的空间可以容纳更多的新闻内容，并且也容易组织分类效果，下面就是一个这样的代码实例，下面就介绍一下它的实现过程。
代码如下:
<!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/