javascript - 如何在下拉菜单中为事件网页加下划线？

<分区>

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 7 年前。

我正在使用 bootstrap 构建网页，在我的导航栏中，我有三个下拉菜单。我想对页面进行编程，以便当前加载的页面及其相应的下拉菜单带有下划线或突出显示，以便用户知道他们在哪个页面上。

在我的html文件中，下拉菜单导航栏如下:

<ul class="dropdown-menu">
     <li><a href="#'>item1</li>
     <li><a href='#'>item2</li>
</ul>

在我的css文件中，activePage类定义如下:

.activePage {
     text-decoration: underline;
}

在我的 javascript 文件中，我尝试执行以下操作:

$('.dropdown-menu a').click(function(){
     $('.dropdown-menu a').removeClass('activePage');
     $(this).addClass('activePage');
});

但是上面的内容并没有在下拉菜单中强调我所在的当前页面。我觉得它很奇怪，因为当我执行以下操作时:

<ul class="dropdown-menu">
     <li><a class="activePage" href="#'>item1</li>
     <li><a href='#'>item2</li>
</ul>

第一项成功加下划线。

最佳答案

你只是有一些打字错误。 JavaScript 应该使用 '.dropdown-menu a' 选择器而不是 '.dropdown-menu .a'。它还缺少尾随括号。

html

<ul class="dropdown-menu">
  <li><a href="#">item1</li>
  <li><a href="#">item2</li>
</ul>

CSS

/* this line is assumed from bootstrap */
a {text-decoration: none;}
.activePage {
  text-decoration: underline;
}

JavaScript

$('.dropdown-menu a').click(function() {
  $('.dropdown-menu a').removeClass('activePage');
  $(this).addClass('activePage');
});

关于javascript - 如何在下拉菜单中为事件网页加下划线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33549813/