Question

我有一个导航栏，该导航栏突出显示了您悬停的菜单项，并具有-100到0％的效果。我想在单击菜单项时加下划线。我不明白为什么我的for循环无法正常运行。我创建了“ x”变量，并认为它会在每次循环迭代中增加1，但这不会发生，因为当我单击最后一项时，选择了第二个元素。

const menu_links = document.querySelectorAll(".menu-link");
const active = document.querySelectorAll(".link-mark");

for (let i = 0; i < menu_links.length; i += 1) {
  var x = 0;
  menu_links[i].addEventListener("click", function() {
    const current = document.getElementsByClassName("link-active");
    current[0].className = current[0].className.replace("link-active", "");
    active[x].classList.add("link-active");
  })
  x += 1;
}

.underline {
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  left: -100%;
  background-color: #3399FF;
}

ul li a:hover>.underline {
  left: 0%;
  transition: 0.4s;
}

.link-active {
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 100%;
  left: 0%;
  background-color: #3399FF;
}

<ul class="menu">
  <li>
    <a href="#" class="menu-link">
      Main Page<div class="link-mark underline link-active"></div>
    </a>
  </li>
  <li>
    <a href="#" class="menu-link">
      Blog<div class="link-mark underline"></div>
    </a>
  </li>
  <li>
    <a href="#" class="menu-link">
      Contact<div class="link-mark underline"></div>
    </a>
  </li>
  <li>
    <a href="#" class="menu-link">
      More<div class="link-mark underline"></div>
    </a>
  </li>
</ul>

Answer 1

您想做类似的事情吗？

const myMenu = document.getElementById('menu');

myMenu.onclick=e=>  // JS event delegation
  {
  if (e.target.tagName.toLowerCase() != 'a' ) return; // only
  e.preventDefault;
  let LI = e.target.parentElement;

  if (!LI.classList.contains('active'))
    {
    myMenu.querySelector('li.active').classList.remove('active');
    }
  LI.classList.add('active');
  }

ul#menu {
  list-style: none;
}
ul#menu li {
  display: inline-block;
  padding: .3em .5em;
  position:relative;
  overflow: hidden;
}
ul#menu li::before {
  position: absolute;
  display: block;
  content: '';
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 5px;
  transition: 0.4s;
  background-color: #3399FF;
}
ul#menu li.active::before,
ul#menu li:hover::before {
  left:0%;
}
ul#menu li a {
  text-decoration: none;
}

<ul id="menu">
  <li class="active"><a href="#">Main Page</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">More</a></li>
</ul>

Answer 2

我不确定是否已经完全了解您想要什么，但是这里有一个片段：

const menu_links = Array.from(document.getElementsByClassName("menu-link"))

function handleClick(evt) {
  evt.preventDefault()
  menu_links.forEach(link => link.classList.remove("link-active"))
  evt.target.classList.add("link-active")
}

menu_links.forEach(link => link.addEventListener("click", handleClick))

.underline {
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 0;
  left: 0;
  background-color: #3399FF;
}

ul li a:hover > .underline {
  width: 100%;
  transition: width 0.4s;
}

.link-active {
  position: absolute;
  bottom: 0;
  height: 5px;
  width: 0;
  background-color: #3399FF;
}

<ul class="menu">
  <li>
    <a href="#" class="menu-link">
      Main Page<div class="link-mark underline link-active"></div>
    </a>
  </li>
  <li>
    <a href="#" class="menu-link">
      Blog<div class="link-mark underline"></div>
    </a>
  </li>
  <li>
    <a href="#" class="menu-link">
      Contact<div class="link-mark underline"></div>
    </a>
  </li>
  <li>
    <a href="#" class="menu-link">
      More<div class="link-mark underline"></div>
    </a>
  </li>
</ul>

与更改left相比，我认为最好更改width（这样可以避免溢出问题）。
为什么同时保留menu_links和active？仅一个就够了

单击时如何在导航栏项目下划线？

2 个答案: