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

标签 javascript html css

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

<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/

相关文章:

php - 通过php上传pdf文件到mysql时查询失败

javascript - 内联(不是内联 block )行为元素的最小宽度

html - 如何用css使这个图像模糊

javascript - 为什么 <ul> 的内容不会出现?

javascript - 如何访问 vuetify.js 2 中 v-data-table 之外的总项目?

javascript - jQuery toggleClass 有效,在点击时添加 .text() 替换会破坏它

javascript - Bootstrap 防止下拉菜单在光标移动时消失

javascript - 将动画添加到下拉菜单

javascript - 只允许字符串中的特定字符。 Javascript

javascript - 我的代码中可以有多少个循环是否有限制?