复制代码代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 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="js/jquery-1.9.1.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 div 实时热点 /div div 七日关注 /div /div div !-----------实时热点-------------- ul li img src="img/1_1.jpg"/ a href="#" 来自星星你的 /a /li li img src="img/1_2.jpg"/ a href="#" 私人定制的 /a /li li img src="img/3_1.jpg"/ a href="#" 全能星战的 /a /li li img src="img/1_4.jpg"/ a href="#" 加多宝陪千万的 /a /li li img src="img/1_5.jpg"/ a href="#" 女生厕所产子之后上课的 /a /li li img src="img/1_6.jpg"/ a href="#" 圆通夺命快递始末的 /a /li li img src="img/1_7.jpg"/ a href="#" 翻版张柏芝的 /a /li li img src="img/1_8.jpg"/ a href="#" 李彦鹏说谎的 /a /li li img src="img/1_9.jpg"/ a href="#" 1.7亿元存折的 /a /li li img src="img/1_10.jpg"/ a href="#" 90后为讨好男友溺死亲生女的 /a /li li a href="#" 查看完整榜单 /a /li /ul !-----------七日关注-------------------- ul li img src="img/1_1.jpg"/ a href="#" 南京出土神秘宝剑的 /a /li li img src="img/1_2.jpg"/ a href="#" 民政局假结婚证的 /a /li li img src="img/3_1.jpg"/ a href="#" 沃尔玛道歉的 /a /li li img src="img/1_4.jpg"/ a href="#" 买发卡的女孩的 /a /li li img src="img/1_5.jpg"/ a href="#" 假茅台骗两亿贷款的 /a /li li img src="img/1_6.jpg"/ a href="#" 男子收到亡妻圣诞大礼的 /a /li li img src="img/1_7.jpg"/ a href="#" 全球最美的100的 /a /li li img src="img/1_8.jpg"/ a href="#" 陨石八千万 /a /li li img src="img/1_9.jpg"/ a href="#" 安培参拜靖国神社 /a /li li img src="img/1_10.jpg"/ a href="#" 春晚舞台曝光 /a /li li a href="#" 查看完整榜单 /a /li /ul /div /div /body /html
