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

Detailed explanation of MYSQL log and backup and restore issues

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

Detailed explanation of MYSQL log and backup and restore issues

JavaScript web form function communication full of practical information

In-depth understanding of asynchronous waiting in Javascript

Overview of the Differences between Linux TTY/PTS

Getting Started Tutorial for Beginners ⑨: How to Build a Portal Website

Summary of Linux user groups and permissions

Detailed tutorial on using the tomcat8-maven-plugin plugin in Maven

Introduction to the use of common Dockerfile commands

Detailed explanation of data types in JavaScript basics

Font selection problem of copyright symbol in Html (how to make copyright symbol more beautiful)

Recommend

base target="" specifies the target of the base link to open the frame

Details of Linux file descriptors, file pointers, and inodes

Detailed explanation of the buffer pool in MySQL

W3C Tutorial (5): W3C XML Activities

Better-scroll realizes the effect of linking menu and content

How to use the flash plug-in to call the PC's camera and embed it into the TML page

An example of refactoring a jigsaw puzzle game using vue3

Example code for implementing a simple search engine with MySQL

Detailed explanation of Alibaba Cloud security rule configuration

Why is your like statement not indexed?

MySQL 5.7.25 installation and configuration method graphic tutorial

Alibaba Cloud Server Linux System Builds Tomcat to Deploy Web Project

Detailed explanation of the solution to the problem that the content pointed to by the iframe's src does not refresh

Core skills that web front-end development engineers need to master

How to center images horizontally and vertically in DIV or DIV