ナビゲーションメニューバーのレイアウトを強化しようとしています。
達成したいのは、アクティブなメニューの項目に対して「アクティブ」なクラススタイルを設定することです。つまり、クリックしたということです。クラス「アクティブ」のスタイルは、ナビゲーションバーのアイテムを青色で強調表示するだけです（他の「非アクティブ」は灰色のままです）。
メニューのクリックされたボタンのクラスを変更し、ナビゲーションバーの他のすべてのクラスを「非アクティブ」に変更するJavaScript関数makeActive（）を呼び出すonlick属性を使用してみました。
ただし、スタイルによってアクティブなボタンのレイアウトが変更されないため、DOMまたはAJAXについて何かが欠けていると思います。
PD：これを純粋にバニラのJavaScript（JQueryではない）でアーカイブしたいと思います。
styles.css：
/* NavBar */
.topnav {
background-color: #333;
overflow: hidden;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav a {
float: left;
color: #f2f2f2;
text-decoration: none;
text-align: center;
padding: 8px 16px;
font-size: 17px;
}
.topnav a.active {
background-color: rgb(49, 149, 250);
color: white;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
index.html：
<!DOCTYPE html>
<html>
<head>
<title>Travel Agency</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
function makeActive(id)
{
var ancestor = document.getElementsByClassName('topnav');
var descendents = ancestor[0].getElementsByTagName('*');
for(var i = 0; i < descendents.length; i++) {
if (descendents[i].className === "active" && descendents[i].id != id) {
descendents[i].className = "inactive";
break;
}
}
for(var i = 0; i < descendents.length; i++) {
if (descendents[i].id = id) {
descendents[i].className = "active";
break;
}
}
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" id="home" href="#home" onclick="makeActive('home')">Home</a>
<a class="inactive" id="offers" href="#offers" onclick="makeActive('offers')">Offers</a>
<a class="inactive" id="travels" href="#travels" onclick="makeActive('travels')">Travels</a>
<a class="inactive" id="galery" href="#galery" onclick="makeActive('galery')">Galery</a>
<a class="inactive" id="contact" href="#contact" onclick="makeActive('contact')">Contact</a>
<a class="inactive" id="about" href="#about" onclick="makeActive('about')">About</a>
</div>
</body>
</html>
編集：解決しました！関数makeActiveのdouble ===を忘れて、動作しています。
これで、関数は次のようになります。
function makeActive(id)
{
var ancestor = document.getElementsByClassName('topnav');
var descendents = ancestor[0].getElementsByTagName('*');
for(var i = 0; i < descendents.length; i++) {
if (descendents[i].className === "active" && descendents[i].id != id) {
descendents[i].className = "inactive";
break;
}
}
for(var i = 0; i < descendents.length; i++) {
if (descendents[i].id === id) {
descendents[i].className = "active";
break;
}
}
}
まず、タイプミスdescendents[i].id = idがありdescendents[i].id == idますdescendents[i].id === id。
次に、IDにアクセスできません
descendents[i].id
使用する
descendents[i].getAttribute("id")
だから解決策：
descendents[i].getAttribute("id") === id
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加