现行做法的问题在于,如果他们没有到场,就只会增加这一类。 这意味着,只有将原类别与所附“填充”类别相转换,不允许多个要素同时拥有“填充”类别。

在这方面,你如何能够实现理想行为:

1. 取消现有的“填满”类别:

Before adding the "-fill" class to the clicked element, you need to remove it from any other element that might have it. This ensures only one element has the active state at a time.

// Select all anchor elements within the navigation
const navLinks = document.querySelectorAll( .nav-link );

navLinks.forEach(link => {
  // Remove any existing "-fill" class
  link.classList.remove( bi-house-fill ,  bi-heart-fill ,  bi-envelope-fill );
});

2. 在点击元件中添加“填充”类别:

Now, when an anchor element is clicked, you can use classList.toggle to add the "-fill" class specific to the clicked icon.

navLinks.forEach(link => {
  link.addEventListener( click , () => {
    const icon = link.querySelector( i );
    const iconClass = icon.classList[1]; // Get the second class (e.g., "bi-house")
    icon.classList.toggle(`${iconClass}-fill`);
  });
});

<>Explanation:

1. We use querySelectorAll to select all anchor elements with the class nav-link.
2. We loop through each link using forEach.
3. Inside the loop, we use classList.remove to remove any existing "-fill" classes from the icon within the link. This ensures only one element has the active state.
4. We add an event listener to each link for the click event.
5. When a link is clicked, we use querySelector to get the icon element within the link.
6. We then access the second class name of the icon using classList[1]. This assumes the icon class is the second class on the element.
7. Finally, we use classList.toggle with a template literal to dynamically construct the class name to be toggled. This ensures the appropriate "-fill" class is added or removed based on the clicked icon.

这种办法确保,只有被点击的icon有“填充”类别,为运行中的导航项目提供所需的视觉反馈。

为了实现你们重新寻找的行为,你需要把活动听众添加到你们的主角上。 在点击icon时,如尚未填入,请在舱面上添加<条码>-填满,对于所有其他电码,请删除<条码>-填满<>。 如果在场的话。

For this purpose, you have to assign a click event to each navigation item (or alternatively use event delegation approach) and then use Array#forEach to map through your navlinks, get the <i> classes and replace the -fill with an empty string and finally add the -fill to the clicked element.

const navLinks = document.querySelectorAll( .nav-link );

navLinks.forEach(link => {
  link.addEventListener( click , function() {
    // Remove  -fill  from all icons
    navLinks.forEach(otherLink => {
      const icon = otherLink.querySelector( i );
      icon.className = icon.className.replace( -fill ,   );
    });

    // Add  -fill  to the clicked icon
    const icon = this.querySelector( i );
    if (!icon.className.includes( -fill )) {
      icon.className = icon.className +  -fill ;
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">


<ul class="nav">
  <li class="nav-item">
    <a href="#" class="nav-link">
      <i class="bi bi-house"></i>
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">
      <i class="bi bi-heart"></i>
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">
      <i class="bi bi-envelope"></i>
    </a>
  </li>
</ul>