jQuery は数行の code_jquery でタブ切り替えを実装します

今日、突然思いつき、タブ効果を実現する非常に簡単な方法を思いつきました

実際、ロジックは非常に単純ですが、基本的にインターネット上ではこのように書かれていません

実際に適用する際に問題があるか分かりませんが、アドバイスをお願いします

コードをコピーします コードは次のとおりです:

<頭>


<スタイル>
*{ マージン:0; }
ボディ、ウル、リ {
マージン:0;
パディング:0;
}
ボディ{
フォント:12px/1.5 タホマ;
}
#outer {
幅:450px;
マージン:10px 自動;
}
#tab {
オーバーフロー:非表示;
ズーム:1;
背景:#000;
ボーダー:1px ソリッド #000;
}
#tab li {
float:left;
色:#fff;
高さ:30px;
カーソル:ポインタ;
行の高さ:30px;
リストスタイルタイプ:none;
パディング:0 20px;
}
#tab li.current {
色:#000;
背景:#ccc;
}
#content {
ボーダー:1px ソリッド #000;
ボーダー上部の幅:0;
}
#content ul {
行の高さ:25px;
表示:なし;
マージン:0 30px;
パディング:10px 0;
}

                                                                                                                                                                                                                             

1111
                                                                                                                                                                            2222
                                                                                                                                                                            3333
                                                                                   

<スクリプト src="
http://libs.baidu.com/jquery/1.9.0/jquery.js">>
<スクリプト>
$(関数(){
window.onload = function()
{
var $li = $('#tab li');
var $ul = $('#content ul'); $li.click(function(){ $li.removeClass();
var $t = $(this).index();
$(this).addClass('current');
$ul.css('display','none');
$ul.eq($t).css('display','block');
})
}
});
%20%0A%0A%0A

%0A

%E7%94%BB%E5%83%8F%E3%83%87%E3%83%A2%E3%83%B3%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3:%20

%0A

以上がこの記事で説明した内容のすべてです。皆さんに気に入っていただければ幸いです。