


html css jquery meniru kesan tab carta carian dengan screenshots_HTML/Xhtml_pengeluaran halaman web
May 16, 2016 pm 04:39 PM<!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><
<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="#">Disesuaikan secara peribadi</a>< ;
<li><img src="img/3_1.jpg"/> <a href="#">Almighty Star Wars</a></li< li><img src="img/1_4.jpg"/> <a href="#">Jiaduobao akan menemani anda untuk berjuta-juta</a></li>< ;img src="img/1_5.jpg"/> <a href="#">Perempuan pergi ke kelas selepas bersalin di bilik air</a></li> <img src="img/1_6.jpg"/> <a href="#">Keseluruhan kisah penghantaran ekspres YTO</a></li>
<li> ;< ;img src="img/1_7.jpg"/> <a href="#">Pengeluaran semula Cecilia Cheung</a></li> img/1_8.jpg"/> <a href="#">Li Yanpeng berbohong</a></li>
<li><img src="img/1_9 .jpg" /> <a href="#">Buku simpanan 170 juta yuan</a></li> a href="#">Generasi selepas 90-an menenggelamkan anak perempuannya sendiri untuk menggembirakan teman lelakinya</a></li>
<li style="text-align:right; border-bottom -style :none"><a href="#" style="font-size:15px">Lihat senarai lengkap</a></li>
</ul>
< !----------Ikutinya selama tujuh hari--------> > <li><img src="img/1_1.jpg"/> <a href="#">Pedang misteri ditemui di Nanjing</a></li< li> ;<img src="img/1_2.jpg"/> <a href="#">Sijil nikah palsu dari Biro Hal Ehwal Awam</a></li> < ;img src="img/3_1.jpg"/> <a href="#">Walmart memohon maaf</a></li><li><img src=" img /1_4.jpg"/> <a href="#">Gadis yang membeli kad itu</a></li>
<li><img src="img/1_5 . jpg"/> <a href="#">Moutai Palsu menipu 200 juta pinjaman</a></li>
<li><img src="img/1_6" /> <a href="#">Seorang lelaki menerima hadiah Krismas daripada arwah isterinya</a></li> "/> <a href="#">100 Tercantik di Dunia</a></li>
<li><img src="img/1_8.jpg"/ > ; <a href="#">80 juta meteorit</a></li>
<li><img src="img/1_9.jpg"/> ="#">Ampere Melawat Kuil Yasukuni</a></li>
<li><img src="img/1_10.jpg"/> ;Pendedahan pentas Gala Festival Musim Bunga</a></li>
<li style="text-align:right; border-bottom-style:none"><a href="#" style = "font-size:15px">Lihat senarai lengkap</a></li>
</ul></div> ;/body>
</html>
Paparan hasil:

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Betulkan: Ralat ERR_ADDRESS_UNREACHABLE dalam Google Chrome

Logitech G Hub tidak berfungsi dalam Windows 11? Betulkan sekarang

Tidak boleh menggunakan MSI Afterburner dalam Windows 11? Cuba pembaikan berikut.

Bagaimana untuk membetulkan anak tetingkap pratonton tidak berfungsi dalam Windows 11

Betulkan: Ralat VAN 1067 semasa menjalankan Valorant pada Windows 11

Untuk membetulkannya, anda perlu menggunakan stesen tetingkap interaktif

Fungsi DirectX GetDeviceRemovedReason gagal dengan ralat

Bagaimana untuk melumpuhkan autoplay video dalam penyemak imbas Opera?
