如何在下拉菜单中为活动网页加下划线？

Question

我正在使用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>

第一项成功加下划线。

Answer 1

你只有一些打字错误。 JavaScript应使用'.dropdown-menu a'选择器而不是'.dropdown-menu .a'。它也缺少一个尾随的paranthesis。

演示：http://codepen.io/anon/pen/vNzRJP

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');
});

Answer 2

您键入了.dropdown-menu .a而不是.dropdown-menu a。

它不起作用

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

它会起作用

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