html+css+jquery做选项卡-   !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/x... 刘楷的博客-2021加油

html+css+jquery做选项卡

『记录点滴,记录成长,记录工作,记录生活,记录人生。』
   
首页>> 代码 >>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.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="#">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.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>
 
  </div>
 
  </div>
 
  </body>
 
  </html>







 

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:刘楷的博客-2021加油 » html+css+jquery做选项卡
标签: html代码

网友评论(0)

*

*