欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

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;

  }

  #mainp.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;

  }

  #mainpul.main_content_chang{

  width:290px;

  position:relative;

  z-index:100;

  TOP:0px;

  left:0px;

  display:block;

  }

  #mainpul{

  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("p").css("background-color","#fff");

  $("#mainpul").removeClass("main_content_chang");

  $(".main_contentul:eq("+index+")").show().siblings("ul").hide();

  })

  })

  })

  </script>

  </head>

  <body>

  <pid="main">

  <pclass="main_title">

  <pclass="chang"style="background:#E02D29">实时热门</p>

  <pclass="chang"style="float:right;">7日关注</p>

  </p>

  <pclass="main_content">

  <!-----------实时热门-------------->

  <ulclass="main_content_chang">

  <li><imgsrc="img/1_1.jpg"/><ahref="#">来自星星你的</a></li>

  <li><imgsrc="img/1_2.jpg"/><ahref="#">私人定制的</a></li>

  <li><imgsrc="img/3_1.jpg"/><ahref="#">全能星战的</a></li>

  <li><imgsrc="img/1_4.jpg"/><ahref="#">加多宝陪千万的</a></li>

  <li><imgsrc="img/1_5.jpg"/><ahref="#">女生卫生间产子之后上课的</a></li>

  <li><imgsrc="img/1_6.jpg"/><ahref="#">圆通夺命快递始末的</a></li>

  <li><imgsrc="img/1_7.jpg"/><ahref="#">翻版张柏芝的</a></li>

  <li><imgsrc="img/1_8.jpg"/><ahref="#">李彦鹏撒谎的</a></li>

  <li><imgsrc="img/1_9.jpg"/><ahref="#">1.7亿元存折的</a></li>

  <li><imgsrc="img/1_10.jpg"/><ahref="#">九零后为讨好男朋友溺死亲生女的</a></li>

  <listyle="text-align:right;border-bottom-style:none"><ahref="#"style="font-size:15px">查询完整榜单</a></li>

  </ul>

  <!-----------7日关注-------------------->

  <ul>

  <li><imgsrc="img/1_1.jpg"/><ahref="#">南京出土神秘宝剑的</a></li>

  <li><imgsrc="img/1_2.jpg"/><ahref="#">民政局*的</a></li>

  <li><imgsrc="img/3_1.jpg"/><ahref="#">沃尔玛道歉的</a></li>

  <li><imgsrc="img/1_4.jpg"/><ahref="#">买发卡的女生的</a></li>

  <li><imgsrc="img/1_5.jpg"/><ahref="#">假茅台骗两亿贷款的</a></li>

  <li><imgsrc="img/1_6.jpg"/><ahref="#">男子收到亡妻圣诞节大礼的</a></li>

  <li><imgsrc="img/1_7.jpg"/><ahref="#">全球最好看的的100的</a></li>

  <li><imgsrc="img/1_8.jpg"/><ahref="#">陨石八千万</a></li>

  <li><imgsrc="img/1_9.jpg"/><ahref="#">安培参拜靖国神社</a></li>

  <li><imgsrc="img/1_10.jpg"/><ahref="#">春节联欢晚会舞台揭秘</a></li>

  <listyle="text-align:right;border-bottom-style:none"><ahref="#"style="font-size:15px">查询完整榜单</a></li>

  </ul>

  </p>

  </p>

  </body>

  </html>



本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.dgznd.com.cn 关注: 时间:2022-05-01 18:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTMLjichu/20220501/14027.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧