我有一个基本网页并创建了一个导航栏。导航栏上的每个标题都会将一个分隔线切换为可见,而其余的则不可见。必须有一种更短、更简单、更有效的方法来对此进行编码吗?
<script type='text/javascript'>
function Nav1(){
document.getElementById("Nav1").classList.add("Active");
document.getElementById("Nav2").classList.remove("Active");
document.getElementById("Nav3").classList.remove("Active");
document.getElementById("Nav4").classList.remove("Active");
document.getElementById("Div1").classList.remove("d-none");
document.getElementById("Div2").classList.add("d-none");
document.getElementById("Div3").classList.add("d-none");
document.getElementById("Div4").classList.add("d-none");
}
...
我正在使用 d-none
来隐藏分隔线,而 Active
只是一个改变边框颜色的类。
我是 javascript 的新手,因此非常感谢完整的解释。 (我正在为网页使用 Python 和 Flask。)
最佳答案
您的 HTML 结构:
- 为所有“可切换”分隔线提供一个类
.divider
。 - 给每个
.divider
一个唯一的 id。 - 将点击处理程序附加到每个切换特定分隔线的按钮。
点击处理程序还传递一个参数
id
这是唯一的id
您想要使用该按钮切换的分隔线。
现在是 CSS:
- 具有类
divider
的元素应该被隐藏,除非它们也有一个类可见
。
还有你的 JS:
- 您的点击处理程序触发的
showDivider
函数会选择所有具有类divider
的元素,然后迭代(循环)它们。 - 如果迭代分隔符与传递的 id 匹配,它会向其添加
visible
类,否则会删除它(如果它已经有)。
这是一个完整的例子:
function showDivider(id) {
// Select all elements with class 'divider'.
document.querySelectorAll('.divider')
.forEach(divider => {
// for each element:
// if this divider has the passed id.
if (divider.getAttribute('id') === id) {
// add the class 'visible' to it.
divider.classList.add('visible')
} else {
// if not, remove class 'visible' from it.
divider.classList.remove('visible')
}
})
}
/* Elements with class "divider" should be hidden. */
.divider {
display: none;
}
/* Elements with both class "divider" & "visible" should be visible. */
.divider.visible {
display: block;
}
<button onclick="showDivider('a');" >Show Divider A</button>
<button onclick="showDivider('b');" >Show Divider B</button>
<button onclick="showDivider('c');" >Show Divider C</button>
<hr>
<div id="a" class="divider">
Hello Content A!
</div>
<div id="b" class="divider">
Hello Content B!
</div>
<div id="c" class="divider">
Hello Content C!
</div>
如果您希望任何具有 divider
类的元素在页面加载时可见,只需显式添加 visible
类即可,如下所示:
<div id="a" class="divider visible">
Hello Content A!
</div>
<div id="b" class="divider">
Hello Content B!
</div>
<div id="c" class="divider">
Hello Content C!
</div>
关于javascript - 切换分隔线的更有效方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54542180/