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

How to underline active webpage in drop down menu?

本文关键字：活动 网页 下划线 下拉菜单      更新时间：2023-09-26

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

在我的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'。它还缺少一个拖尾的偏执狂。

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

您键入的是.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');
}
相关文章：