你的位置:首页 > Java教程

[Java教程]选项卡切换的新闻列表效果代码实例


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

 

<!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/