HTML+CSS+jQuery imitates the search hot list tab effect with screenshots

Copy code

The code is as follows:

<!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>List Tab</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">Real-time hot spots</div>
<div class="chang" style="float:right;">Seven-day attention</div>
</div>
<div class="main_content">

<ul class="main_content_chang">
<li><img src="img/1_1.jpg"/> <a href="#">Your from the Star</a></li>
<li><img src="img/1_2.jpg"/> <a href="#">Personalized</a></li>
<li><img src="img/3_1.jpg"/> <a href="#">Almighty Star Wars</a></li>
<li><img src="img/1_4.jpg"/> <a href="#">Jiaduobao will pay tens of millions</a></li>
<li><img src="img/1_5.jpg"/> <a href="#">Girls' bathroom after giving birth</a></li>
<li><img src="img/1_6.jpg"/> <a href="#">The whole story of the fatal YTO Express delivery</a></li>
<li><img src="img/1_7.jpg"/> <a href="#">Copy of Cecilia Cheung</a></li>
<li><img src="img/1_8.jpg"/> <a href="#">Li Yanpeng is lying</a></li>
<li><img src="img/1_9.jpg"/> <a href="#">170 million yuan savings book</a></li>
<li><img src="img/1_10.jpg"/> <a href="#">A 90s girl drowned her own daughter to please her boyfriend</a></li>
<li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">View the full list</a></li>
</ul>

<ul>
<li><img src="img/1_1.jpg"/> <a href="#">Mysterious sword unearthed in Nanjing</a></li>
<li><img src="img/1_2.jpg"/> <a href="#">Fake marriage certificate from the Civil Affairs Bureau</a></li>
<li><img src="img/3_1.jpg"/> <a href="#">Walmart apologizes</a></li>
<li><img src="img/1_4.jpg"/> <a href="#">Girl buying hairpins</a></li>
<li><img src="img/1_5.jpg"/> <a href="#">Fake Moutai defrauded 200 million yuan in loans</a></li>
<li><img src="img/1_6.jpg"/> <a href="#">Man receives Christmas gift from deceased wife</a></li>
<li><img src="img/1_7.jpg"/> <a href="#">The 100 most beautiful women in the world</a></li>
<li><img src="img/1_8.jpg"/> <a href="#">Meteorite 80 million</a></li>
<li><img src="img/1_9.jpg"/> <a href="#">Abe visits Yasukuni Shrine</a></li>
<li><img src="img/1_10.jpg"/> <a href="#">Spring Festival Gala stage exposed</a></li>
<li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">View the full list</a></li>
</ul>
</div>
</div>
</body>
</html>

Results:

<<: Analysis and explanation of the differences between DIV, Table and XHTML website building

>>: WeChat Mini Programs are shared globally via uni-app

HTML+CSS+jQuery imitates the search hot list tab effect with screenshots

JavaScript Dom Object Operations

mysql8.0 forgotten password modification and net command service name invalid problem

Detailed tutorial for installing mysql5.7.21 under Windows

Detailed explanation of HTML element height, offsetHeight, clientHeight, scrollTop, etc.

Graphical explanation of the function call of proto file in Vue

Several ways to vertically and horizontally center in CSS3 with indefinite height and width

Installation process of CentOS8 Linux 8.0.1905 (illustration)

Detailed explanation of the implementation process of ServerSocket default IP binding

Tutorial on migrating mysql from phpstudy to Linux

A brief analysis of the use of the HTML webpack plugin

Recommend

Detailed explanation of MySQL index principles and optimization

Pure js to achieve the effect of carousel

Detailed tutorial on running Tomcat in debug mode in IDEA Maven project

Solve the problem of ugly blue border after adding hyperlink to html image img

Simple comparison of meta tags in html

Vue3+TypeScript implements a complete example of a recursive menu component

Detailed explanation of Vuex overall case

How to add double quotes in HTML title

How to implement scheduled automatic backup of MySQL under CentOS7

Detailed explanation of invisible indexes in MySQL 8.0

Docker Swarm from deployment to basic operations

Implementing countdown effect with javascript

Teach you how to build a Hadoop 3.x pseudo cluster on Tencent Cloud

Implementation of textarea adaptive height solution in Vue

Implementation of Nginx load balancing cluster