js点击导航栏其中一个隐藏其它的
时间: 2024-03-10 20:48:58 浏览: 20
可以通过以下步骤实现:
1. 给每个需要隐藏的导航元素添加相同的 class 名称,比如 "hide-nav"。
2. 使用 JavaScript 监听点击事件,获取被点击的导航元素。
3. 使用 DOM 操作方法获取所有带有 "hide-nav" class 名称的导航元素。
4. 遍历所有 "hide-nav" 元素,将除被点击的导航元素外其它导航元素的 display 样式设置为 "none"。
以下是示例代码:
HTML 代码:
```
<nav>
<a class="hide-nav" href="#">导航 1</a>
<a class="hide-nav" href="#">导航 2</a>
<a class="hide-nav" href="#">导航 3</a>
<a class="hide-nav" href="#">导航 4</a>
</nav>
```
JavaScript 代码:
```
// 获取所有带有 "hide-nav" class 名称的导航元素
const hideNavs = document.querySelectorAll('.hide-nav');
// 监听点击事件
document.addEventListener('click', (event) => {
const clickedNav = event.target;
// 判断被点击的元素是否为导航元素
if (clickedNav.classList.contains('hide-nav')) {
// 遍历所有 "hide-nav" 元素
hideNavs.forEach((nav) => {
// 将除被点击的导航元素外其它导航元素的 display 样式设置为 "none"
if (nav !== clickedNav) {
nav.style.display = 'none';
}
});
}
});
```