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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>リストタブ</title>
<スタイルタイプ="text/css">
体{
マージン:0px;
パディング:0px;
}
＃主要{
幅:310ピクセル;
境界線:1px 実線 #C8C8CC;
左マージン:自動;
右マージン:自動;
上マージン:50px;
}
.メインタイトル{
幅:310ピクセル;
下部境界線:1px 実線 #C8C8CC;
高さ:30px;
}
#main div .chang{
境界線:1px 実線 #C8C8CC;
フロート:左;
幅:153ピクセル;
高さ:26px;
テキスト配置:中央;
パディング上部:4px;
カーソル:ポインタ;
}
.main_head{
幅:310ピクセル;
高さ:25px;
背景色:#FFF4F8;
}
.main_head フォント{
フォントサイズ:13px;
色:#808080;
上マージン:5px;
}
.main_content{
幅:310ピクセル;
上境界線:1px 実線 #808080;
}
.main_content ul{
左マージン:-30px;
上マージン:5px;
幅:290ピクセル;
}
.main_content ul li{
リストスタイルタイプ:なし;
フォントサイズ:13px;
色:#2464B2;
border-bottom:1px 点線 #808080;
行の高さ:27px;
}
.main_content ul li a{
フォントサイズ:13px;
色:#2464B2;
テキスト装飾:なし;
}
.main_content ul li a:hover{
テキスト装飾:下線;
}
#main div ul.main_content_chang{
幅:290ピクセル;
位置:相対;
zインデックス:100;
上:0px;
左:0px;
表示:ブロック;
}
#メインdivul{
位置:相対;
表示:なし;
}
</スタイル>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(関数(){
$(".chang").each(関数(インデックス){
$(this).click(function(){
$(this).css("背景色","#E02D29");
$(this).siblings("div").css("background-color","#fff");
$("#main div ul").removeClass("main_content_chang");
$(".main_content ul:eq("+index+")").show().siblings("ul").hide();
})
})
})
</スクリプト>
</head>
<本文>
<div id="メイン">
<div class="main_title">
<div class="chang" style="background:#E02D29">リアルタイムのホットスポット</div>
<div class="chang" style="float:right;">7日間の注意</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="#">Jiaduobao は数千万を支払う</a></li>
<li><img src="img/1_5.jpg"/> <a href="#">出産後の女子トイレ</a></li>
<li><img src="img/1_6.jpg"/> <a href="#">致命的な YTO エクスプレス配送の全容</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="#">偽茅台酒が2億元の融資を詐取</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="#">隕石 8000 万</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>
</本文>
</html>

結果：