javascript - 切换分隔线的更有效方法？

Question

我有一个基本网页并创建了一个导航栏。导航栏上的每个标题都会将一个分隔线切换为可见，而其余的则不可见。必须有一种更短、更简单、更有效的方法来对此进行编码吗？

<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。)

Answer 1

您的 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>