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

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

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

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

.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>

但是，上述内容不会在下拉菜单中的当前页面下划下划线。我觉得这很奇怪，因为当我做以下事情时：

$('.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>

您键入了
.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');
}

你只是有一些打字错误。JavaScript应该使用
”。下拉菜单是一个“
选择器，而不是
”。下拉菜单是一个“
”。它还遗漏了一篇论文

演示：

html

javascript

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

打字错误
.a
应该是
a
，它不是类，而是元素。谢谢你的建议。然而，在修改之后，它仍然不起作用。你真的只是在你的代码中有更多的打字错误。请参阅更正的拼写错误；你的JS代码是正确的。请为HTML使用一个具有适当语法突出显示的编辑器，它将使您的生活更轻松。非常感谢你们，它已修复。我发现这个bug是由拼写错误和没有在标签中添加href=“#”组成的。我改为使用href=“”，这也导致了无下划线问题。感谢您提供的代码笔链接和建议。我做了更改，但仍然不起作用。我的解决方案有效，单击每个链接时都会加下划线，是否有更多代码？当你点击链接时，你真的在改变URI并加载一个新页面吗？因为JavaScript会再次加载，并且不会在页面加载之间保持状态。在这种情况下，您将不希望使用JavaScript更改活动页面类，但可能需要在HTML中对其进行硬编码。谢谢Alex，在编写了更多代码并实际将网页相互链接之后，我意识到我的代码无法工作。我已经知道了如何在加载每个新页面时做到这一点。但不管怎样，非常感谢你的帮助。