Rumah hujung hadapan web html tutorial html css jquery meniru kesan tab carta carian dengan screenshots_HTML/Xhtml_pengeluaran halaman web

html css jquery meniru kesan tab carta carian dengan screenshots_HTML/Xhtml_pengeluaran halaman web

May 16, 2016 pm 04:39 PM
tab


Salin kod
Kod adalah seperti berikut:

<!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&gt ;<img src="img/1_2.jpg"/> <a href="#">Sijil nikah palsu dari Biro Hal Ehwal Awam</a></li> &lt ;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"/ &gt ; <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:

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Betulkan: Ralat ERR_ADDRESS_UNREACHABLE dalam Google Chrome Betulkan: Ralat ERR_ADDRESS_UNREACHABLE dalam Google Chrome May 15, 2023 pm 06:22 PM

Betulkan: Ralat ERR_ADDRESS_UNREACHABLE dalam Google Chrome

Logitech G Hub tidak berfungsi dalam Windows 11? Betulkan sekarang Logitech G Hub tidak berfungsi dalam Windows 11? Betulkan sekarang Apr 17, 2023 pm 08:16 PM

Logitech G Hub tidak berfungsi dalam Windows 11? Betulkan sekarang

Tidak boleh menggunakan MSI Afterburner dalam Windows 11? Cuba pembaikan berikut. Tidak boleh menggunakan MSI Afterburner dalam Windows 11? Cuba pembaikan berikut. May 09, 2023 am 09:16 AM

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

Bagaimana untuk membetulkan anak tetingkap pratonton tidak berfungsi dalam Windows 11 Bagaimana untuk membetulkan anak tetingkap pratonton tidak berfungsi dalam Windows 11 Apr 24, 2023 pm 06:46 PM

Bagaimana untuk membetulkan anak tetingkap pratonton tidak berfungsi dalam Windows 11

Betulkan: Ralat VAN 1067 semasa menjalankan Valorant pada Windows 11 Betulkan: Ralat VAN 1067 semasa menjalankan Valorant pada Windows 11 May 22, 2023 pm 02:41 PM

Betulkan: Ralat VAN 1067 semasa menjalankan Valorant pada Windows 11

Untuk membetulkannya, anda perlu menggunakan stesen tetingkap interaktif Untuk membetulkannya, anda perlu menggunakan stesen tetingkap interaktif Apr 24, 2023 pm 11:52 PM

Untuk membetulkannya, anda perlu menggunakan stesen tetingkap interaktif

Fungsi DirectX GetDeviceRemovedReason gagal dengan ralat Fungsi DirectX GetDeviceRemovedReason gagal dengan ralat May 17, 2023 pm 03:38 PM

Fungsi DirectX GetDeviceRemovedReason gagal dengan ralat

Bagaimana untuk melumpuhkan autoplay video dalam penyemak imbas Opera? Bagaimana untuk melumpuhkan autoplay video dalam penyemak imbas Opera? Apr 22, 2023 pm 10:43 PM

Bagaimana untuk melumpuhkan autoplay video dalam penyemak imbas Opera?

See all articles