js css_javascriptスキルでタブメニュー切り替え効果を実現する方法

この記事の例では、js css を使用してタブ メニューの切り替え効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

index.css は次のとおりです:

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

* {
マージン: 0px; パディング: 0px; }
ボディ {
幅: 600px; マージン: 0 自動
背景色: シルバー
}

#コンテナ {
背景色: 黄色
幅: 600ピクセル; 高さ: 400ピクセル; }

#tabNavi {
幅: 600ピクセル; 高さ: 30ピクセル; 背景色: #00bfff; テキスト装飾: なし
リストスタイルタイプ: なし
}

#tabNavi li {
フロート: 左
マージン右: 7px;
背景色: #008b8b; 色：白
カーソル: ポインタ
幅: 60px; 高さ: 28px; 行の高さ: 30px; テキストの配置: 中央;
}
#content {
幅: 600ピクセル; 高さ: 370ピクセル; 背景色: 白
}


index.html は次のとおりです:




コードをコピー


コードは次のとおりです:

<スクリプトタイプ="text/javascript"> 関数 gel(id) {
return document.getElementById(id);                                                                                                              
var arr = [
{ "title": "ニュース", "content": "これはニュース チャンネルです" },
{ "title": "ファイナンス", "content": "これはファイナンス チャネルです" },
{ "title": "エンターテイメント", "content": "これはエンターテイメント チャンネルです" },
{ "title": "スポーツ", "content": "これはスポーツ チャンネルです" },
{ "title": "自動車", "content": "これは自動車チャンネルです" },
{ "title": "ビデオ", "content": "これはビデオ チャンネルです" },
{ "title": "ライフ"、"content": "これがライフ チャンネルです" }
];

window.onload = function() { for (var i = 0; i var liNew = document.createElement("li");                                                                                                                                                     gel("tabNavi").appendChild(liNew); // クリック イベントをこれらの li にバインドします。それぞれに属性 (できれば ID) を割り当てる必要があります
linew.setattribute（ "id"、i）;                                                                                                                                                                                  var navs = gel("tabNavi").childNodes; //すべての色をクリア
for (var j = 0; j If (navs[j].nodeType == 1) {
navs[j].style.backgroundColor ="#008b8b";                                                                                                                                                                                                                                                                          
This.style.backgroundColor = "赤"
gel("content").innerHTML = arr[this.id].content;                                                                                                                                                                                                           };

                                                                                                                                                                                                                                                                                                                                                   

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。