この記事では、JSによるマルチオプションスイッチングナビゲーションメニューを実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<title>複数オプショントグルナビゲーションメニュー</title>
</head>
<style type = "text/css">
#dnavbar {
バックグラウンドカラー：#ffffff;
}
#dnavbar li {
リストスタイルタイプ：なし;
フロート：左;
幅：84px;
高さ：28px;
ラインハイト：28px;
フォントサイズ：12px;
色：#ffffff;
ボーダー：1pxソリッド#ffffff;
背景：＃86C2FF;
テキストアライグ：センター;
表示：ブロック;
カーソル：ポインター;
}
#submenu {
背景：＃99cc66;
幅：500px;
国境左：1px solid #ffffff;
国境右：1px solid #ffffff;
高さ：29px;
ラインハイト：29px;
色：#ffffff;
フォントサイズ：12px;
パディング左：10px;
}
体 {
マージン：0px;
}
A：リンク、A：訪問{
色：#ffffff;
テキスト装置：なし;
}
A：ホバー{
色：#ffffff;
テキスト装置：なし;
}
</style>
<スクリプト言語= "javascript">
関数showmenu（）
{
var barctt = document.getElementByIdx_x（ "dnavbar"）
var liarr = barctt.getelementsbytagname_r（ "li"）
var links = new array（）
リンク[0] = "<a href = '＃'>現在の場所：ホームページ"
links [1] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a> | <a href = '＃'>プロジェクト3 </a> | <a href = '＃'>プロジェクト4 </a>"
links [2] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a> | <a href = '＃'>プロジェクト3 </a>"
links [3] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a> | <a href = '＃'>プロジェクト3 </a> | <a href = '＃'>プロジェクト4 </a> | <a href = '＃'>プロジェクト5 </a>"
リンク[4] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a>"
links [5] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a> | <a href = '＃'>プロジェクト3 </a>"
リンク[6] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a>"
リンク[7] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a>"
リンク[8] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a>"
リンク[9] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a>"
リンク[10] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a>"
リンク[11] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a>"
リンク[12] = "<a href = '＃'>プロジェクト1 </a> | <a href = '＃'>プロジェクト2 </a>"
for（i = 0; i <liarr.length; i ++）
{
liarr [i] .onclick = function（）
{
Selecthis（これ、liarr、リンク）
}
}
}
関数Selectis（indexobj、allli、infoarr）
{
var index = 0;
for（i = 0; i <allli.length; i ++）
{
allli [i] .style.border = "1px solid #ffffff";
allli [i] .style.backgroundcolor = "＃86c2ff";
allli [i] .style.height = "28px";
if（indexobj == allli [i]）
{
index = i;
}
}
indexobj.style.borderbottom = "0px solid＃666688";
indexobj.style.backgroundcolor = "＃99cc66";
indexobj.style.height = "31px";
document.getElementByIdx_x（ "submenu"）。innerhtml = infoarr [index];
}
</script>
<body onload = "showmenu（）">
<div id = "dnavbar" style = "float：none; width：560px;"> <li> home </li> <li> Entertainment Express </li> <li> Music World </li> <li> flash </li>
</div>
<div id = "submenu">サイト問題の発表</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。