この記事では、JS+CSSによるタブメニューの切り替え効果を実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
index.cssは次のとおりです。
次のようにコードをコピーします：* {
マージン：0px;
パディング：0px;
}
体 {
幅：600px;
マージン：0 Auto;
背景色：銀;
}
#contanier {
背景色：黄色。
幅：600px;高さ：400px;
}
#tabnavi {
幅：600px;高さ：30px;
バックグラウンドカラー：＃00BFFF;
テキスト装置：なし;
リストスタイルタイプ：なし;
}
#tabnavi li {
フロート：左;
マージン右：7px;
バックグラウンドカラー：＃008B8B;
色：白;
カーソル：ポインター;
幅：60px;
高さ：28px;
Line-Height：30px;
テキストアライグ：センター;
}
＃コンテンツ {
幅：600px;高さ：370px;
背景色：白。
}
index.htmlは次のとおりです。
次のようにコードをコピーします：<！doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> jsは、タブメニューの動的スイッチング効果を実現します</title>
<link href = "css /index.css" rel = "styleSheet" />
<script type = "text/javascript">
function gel（id）{
document.getElementByID（ID）を返します。
}
var arr = [
{"title"： "News"、 "Content"： "これはニュースチャンネル"}、
{"Title"： "Financial"、 "Content"： "これは金融チャネル"}、
{"Title"： "Entertainment"、 "Content"： "これはエンターテインメントチャンネル"}、
{"title"： "sports"、 "content"： "これはスポーツチャンネル"}、
{"title"： "car"、 "content"： "これはカーチャンネル"}、
{"title"： "video"、 "content"： "これはビデオチャンネル"}、
{"title"： "life"、 "content"： "これはライフチャンネル"}}
];
window.onload = function（）{
for（var i = 0; i <arr.length; i ++）{
var linew = document.createelement（ "li"）;
linew.innerhtml = arr [i] .title;
gel（ "tabnavi"）。appendChild（linew）;
//これらのLIのイベントをクリックするので、それぞれにプロパティを割り当てる必要があります（できればID）
linew.setattribute（ "id"、i）;
linew.onclick = function（）{
var navs = gel（ "tabnavi"）。チャイルドノード;
//すべての色をクリアします
for（var j = 0; j <navs.length; j ++）{
if（navs [j] .nodetype == 1）{
navs [j] .style.backgroundcolor = "＃008b8b";
}
}
this.style.backgroundcolor = "red";
gel（ "content"）。innerhtml = arr [this.id] .content;
};
}
};
</script>
</head>
<body>
<div id = "contanier">
<ul id = "tabnavi"> </ul>
<div id = "content"> </div>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。