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的元素应该被隐藏，除非它们也具有一个类别 visible。

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

Answer 2

您可以使用以下关键字将当前元素传递给函数：

Nav1(this)

现在，您可以使用ID的最后一个字符并选择所有Navs和Divs。

function Nav1(ele){
    var eleIdFinalNumnber = this.id.substr(-1); 
    document.querySelectorAll('[id^=Nav]').forEach((ele) =>
         (ele.id.substr(-1) == eleIdFinalNumnber) ? ele.classList.add("Active") :  ele.classList.remove("Active")
    );
    document.querySelectorAll('[id^=Div]').forEach((ele) =>
        (ele.id.substr(-1) == eleIdFinalNumnber) ? ele.classList.remove("d-none") :  ele.classList.add("d-none")
    );
}

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

2 个答案: