如何在使用Javascript選擇鏈接時隱藏HTML元素？

我想創建一個使用純粹的HTML和CSS的響應式菜單，但我偶然發現的問題是我的網站使用錨鏈接進行導航，而不是外部頁面鏈接。因爲它們是錨鏈接，所以選擇一個時，菜單疊加層仍然存在。如何在使用Javascript選擇鏈接時隱藏HTML元素？

如何在選擇導航鏈接時使用Javascript將display: none樣式添加到菜單中？如果用戶重新打開導航，這將需要能夠被重新覆蓋。

下面是我的導航基本HTML：

<label for="show-menu" class="show-menu">Menu</label> 
<input type="checkbox" id="show-menu" role="button"> 

<nav> 
    <ul> 
     <li><a href="#projects">Projects</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
</nav>

CSS：

/*Hide checkbox*/ 
input[type=checkbox]{ 
    display: none; 
} 

/*Show menu when invisible checkbox is checked*/ 
input[type=checkbox]:checked ~ nav { 
    display: block; 
}

來源

2017-02-20 cbg

您可以在您的問題中顯示相關的HTML嗎？根據您現有源代碼的結構，您可能會發現一些解決方案比其他解決方案更好，但沒有先看到它，這會讓您更難以爲您提供最佳解決方案。也有可能爲你賦予一個'class'名稱的錨標籤，假設它們還沒有一個「或者你的錨子元素是否帶有'id'？ – NewToJS

@NewToJS我添加了參考代碼。關於將類分配給我的錨標記的問題，是的，如果需要，我可以做到這一點。 – cbg

所以它看起來像你的導航顯示是基於隱藏的複選框被選中或未選中權？如果是這樣，那麼你所需要做的就是將事件監聽器分配給你的錨標記，以取消選中該複選框「如果顯示器是由它驅動的」我不認爲你有任何JavaScript應該與這個菜單？有些東西缺失，因爲菜單總是顯示，所以我不能真正給你一個工作的例子。也許如果你可以創建一個jsfiddle？ https://jsfiddle.net/ – NewToJS

-1

一個容易做的方法是使用jQuery（如果你不使用jQuery我強烈建議你開始），只需在您的菜單中添加id =「menuID」：

<a href="url" onclick="$('#menuID').css('display', 'none');">Click me!</a>

來源

2017-02-20 00:41:25

jQuery沒有在這個問題上標記，所以我建議你解釋如何鏈接到圖書館。 – NewToJS

謝謝，但我使用jQuery的問題是，我不想爲我想要實現的這個小事情加載庫。這就是如果它可以用Javascript來完成？ – cbg

document.getElementById（「menuID」）。style.display =「none」;應該管用。 –

如何在使用Javascript選擇鏈接時隱藏HTML元素？

回答

相關問題