html+css+jquery模仿搜索风云榜选项卡效果有截图
导读：收集整理的这篇文章主要介绍了html+css+jquery模仿搜索风云榜选项卡效果有截图，觉得挺不错的，现在分享给大家，也给大家做个参考。 复制代码代码如下: <!DOCTYPE htML PubLIC "-//W3C//D...
收集整理的这篇文章主要介绍了html+css+jquery模仿搜索风云榜选项卡效果有截图，觉得挺不错的，现在分享给大家，也给大家做个参考。 复制代码代码如下:
!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 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> 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 style="text-align:right; border-bottom-style:none"> a href="#" style="font-size:15px"> 查看完整榜单/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 style="text-align:right; border-bottom-style:none"> a href="#" style="font-size:15px"> 查看完整榜单/a> /li>
/ul>
/div>
/div>
/body>
/html>
结果展示：
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html+css+jquery模仿搜索风云榜选项卡效果有截图
本文地址： https://pptw.com/jishu/587960.html