html+css+jquery做选项卡

  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  <htmlxmlns="http://www.w3.org/1999/xhtml">
 
  <head>
 
  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
 
  <title>列表选项卡</title>
 
  <styletype="text/css">
 
  body{
 
  margin:0px;
 
  padding:0px;
 
  }
 
  #main{
 
  width:310px;
 
  border:1pxsolid#C8C8CC;
 
  margin-left:auto;
 
  margin-right
 
  :auto;
 
  margin-top:50px;
 
  }
 
  .main_title{
 
  width:310px;
 
  border-bottom:1pxsolid#C8C8CC;
 
  height:30px;
 
  }
 
  #maindiv.chang{
 
  border:1pxsolid#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_headfont{
 
  font-size:13px;
 
  color:#808080;
 
  margin-top:5px;
 
  }
 
  .main_content{
 
  width:310px;
 
  border-top:1pxsolid#808080;
 
  }
 
  .main_contentul{
 
  margin-left:-30px;
 
  margin-top:5px;
 
  width:290px;
 
  }
 
  .main_contentulli{
 
  list-style-type
 
  :none;
 
  font-size:13px;
 
  color:#2464B2;
 
  border-bottom:1pxdotted#808080;
 
  line-height:27px;
 
  }
 
  .main_contentullia{
 
  font-size:13px;
 
  color:#2464B2;
 
  text-decoration
 
  :none;
 
  }
 
  .main_contentullia:hover{
 
  text-decoration:underline;
 
  }
 
  #maindivul.main_content_chang{
 
  width:290px;
 
  position:relative;
 
  z-index:100;
 
  top:0px;
 
  left:0px;
 
  display:block;
 
  }
 
  #maindivul{
 
  position:relative;
 
  display:none;
 
  }
 
  </style>
 
  <scripttype="text/javascript"src="js/jquery-1.9.1.js"></script>
 
  <scripttype="text/javascript">
 
  $(function(){
 
  $(".chang").each(function(index){
 
  $(this).click(function(){
 
  $(this).css("background-color","#E02D29");
 
  $(this).siblings("div").css("background-color","#fff");
 
  $("#maindivul").removeClass("main_content_chang");
 
  $(".main_contentul:eq("+index+")").show().siblings("ul").hide();
 
  })
 
  })
 
  })
 
  </script>
 
  </head>
 
  <body>
 
  <divid="main">
 
  <divclass="main_title">
 
  <divclass="chang"style="background:#E02D29">实时热点</div>
 
  <divclass="chang"style="float:right;">七日关注</div>
 
  </div>
 
  <divclass="main_content">
 
  <!-----------实时热点-------------->
 
  <ulclass="main_content_chang">
 
  <li><imgsrc="img/1_1.webp"/><ahref="#">来自星星你的</a></li>
 
  <li><imgsrc="img/1_2.webp"/><ahref="#">私人定制的</a></li>
 
  <li><imgsrc="img/3_1.webp"/><ahref="#">全能星战的</a></li>
 
  <li><imgsrc="img/1_4.webp"/><ahref="#">加多宝陪千万的</a></li>
 
  <li><imgsrc="img/1_5.webp"/><ahref="#">女生厕所产子之后上课的</a></li>
 
  <li><imgsrc="img/1_6.webp"/><ahref="#">圆通夺命快递始末的</a></li>
 
  <li><imgsrc="img/1_7.webp"/><ahref="#">翻版张柏芝的</a></li>
 
  <li><imgsrc="img/1_8.webp"/><ahref="#">李彦鹏说谎的</a></li>
 
  <li><imgsrc="img/1_9.webp"/><ahref="#">1.7亿元存折的</a></li>
 
  <li><imgsrc="img/1_10.webp"/><ahref="#">90后为讨好男友溺死亲生女的</a></li>
 
  <listyle="text-align:right;border-bottom-style:none"><ahref="#"style="font-size:15px">查看完整榜单</a></li>
 
  </ul>
 
  <!-----------七日关注-------------------->
 
  <ul>
 
  <li><imgsrc="img/1_1.webp"/><ahref="#">南京出土神秘宝剑的</a></li>
 
  <li><imgsrc="img/1_2.webp"/><ahref="#">民政局*的</a></li>
 
  <li><imgsrc="img/3_1.webp"/><ahref="#">沃尔玛道歉的</a></li>
 
  <li><imgsrc="img/1_4.webp"/><ahref="#">买发卡的女孩的</a></li>
 
  <li><imgsrc="img/1_5.webp"/><ahref="#">假茅台骗两亿贷款的</a></li>
 
  <li><imgsrc="img/1_6.webp"/><ahref="#">男子收到亡妻圣诞大礼的</a></li>
 
  <li><imgsrc="img/1_7.webp"/><ahref="#">全球最美的100的</a></li>
 
  <li><imgsrc="img/1_8.webp"/><ahref="#">陨石八千万</a></li>
 
  <li><imgsrc="img/1_9.webp"/><ahref="#">安培参拜靖国神社</a></li>
 
  <li><imgsrc="img/1_10.webp"/><ahref="#">春晚舞台曝光</a></li>
 
  <listyle="text-align:right;border-bottom-style:none"><ahref="#"style="font-size:15px">查看完整榜单</a></li>
 
  </ul>
 
  </div>
 
  </div>
 
  </body>
 
  </html>






本文转载自中文网
 

推荐阅读