使用jquery突出显示活动菜单项

我在突出显示活动菜单项时遇到问题。 我正在使用CSS进行悬停，但我从其他帖子中了解到，a:active不适用于CSS

这就是我迄今为止所做的：

HTML

JQUERY

  <script>
 $(document).ready(function() { 
  $("#nav li .nav").click(function ( e ) {
e.preventDefault();
$("#nav li a.active").removeClass("active"); //Remove any "active" class  
$(this).addClass("active"); //Add "active" class to selected tab  

// $(activeTab).show(); //Fade in the active content  
});
});

$（文档）.ready（函数（）{
$（“#nav li.nav”）。单击（函数（e）{
e、 预防默认值（）；
$（“#nav li a.active”）.removeClass（“active”）；//删除任何“active”类
$（this）.addClass（“active”）；//将“active”类添加到所选选项卡
//$（activeTab）.show（）；//淡入活动内容
});
});

提前谢谢

试试这个：

$(document).ready(function() { 
    $("#nav li .nav").click(function ( e ) {
        e.preventDefault();
        $("#nav li a.active").removeClass("active"); //Remove any "active" class  
        $(this).addClass("active"); //Add "active" class to selected tab  
        $(activeTab).show(); //Fade in the active content  
    });
});

你错过了一些

，也不需要使用

$（“a”，this）

$（this）

就可以了

$(function() { 
    $('#nav').on('click','.nav', function ( e ) {
        e.preventDefault();
        $(this).parents('#nav').find('.active').removeClass('active').end().end().addClass('active');
        $(activeTab).show();
    });
});

我更新了代码，在父容器上只使用了一次单击事件，并在函数中减少了DOM遍历。但是，您还需要更新CSS。由于特殊性，无法获得背景色。您使用

#nav

id指定了背景色和悬停。因此，您还需要以这种方式指定.active类

#nav .active { 
    /* css here */
}

---

我通过简单地遍历我的菜单Url并将它们与活动页面Url匹配来解决这个问题，然后将活动css类添加到找到的结果中。这对我很有用：

       //Get the current page link
       current_page_link = document.location.href;

       //Search your menu for a linkURL that is similar to the active pageURL
       $(".navbar-nav a").each(function(){
           var link_loop = $(this).attr("href");
           if(link_loop === current_page_link){
               var found_url = $(this).attr("href");
               $('.navbar-nav a[href="'+found_url+'"]').addClass('active');
           }
       });

---

我使用了以下代码。迟来的回答，但我希望这将有助于某人

// This will work for both relative and absolute hrefs
function active_menu() {   
    var url = window.location.href;
    $('.nav a').filter(function() {
        return this.href == url;
    }).addClass('selected');
}

---

从

#页面指示器

中提取

文本

，并将class

活动

设置为

<!-- Bootstrap 3.3.6 part of navigation -->
<ul class="nav navbar-nav">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
    <li><a href="#">Fifth</a></li>
    <li><a href="#">Sixth</a></li>
</ul>

<!-- Page name indicator -->
<span id="page-indicator" class="hidden"><?= $pageName = 'Third' ?></span>

<!-- jQuery 1.11.3 -->
<script>
    $(document).ready(function () {
        $('.navbar-nav li').each(function () {
            if ($(this).text() == $('#page-indicator').text()) {
                $(this).addClass('active');
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（'.navbar nav li'）。每个（函数（）{
if（$（this）.text（）==$（'#页面指示器'）.text（））{
$（this.addClass（'active'）；
}
});
});

我面临这个问题。我解决这个问题的方法是

<script>
  $(window).load(function(){
      var url = window.location.href;
      $('nav li').find('.active').removeClass('active');
      $('nav li a').filter(function(){
          return this.href == url;
      }).parent().addClass('active');
  });
</script>

$（窗口）。加载（函数（）{
var url=window.location.href；
$（'nav li'）.find（'.active'）.removeClass（'active'）；
$（'nav li a'）.filter（函数（）{
返回this.href==url；
}).parent（）.addClass（'active'）；
});

---

您可以将演示保存到本地并进行测试。

什么意思“

：active

不适用于CSS”？它确实“起作用”，但可能不是你所期望的那样：什么样的麻烦？我根据你发布的代码创建了一个提琴，并将鼠标悬停在这些项目上以突出显示它们@拖鞋Pete悬停不是给我带来麻烦的，我希望链接激活时背景保持黄色。谢谢，但不幸的是，这只会阻止我的整个菜单工作。这很好，谢谢！我的活动链接现在仍然突出显示。如果我可以解决由此产生的新问题，现在菜单项不起作用。当我点击菜单项时，它会保持高亮显示，但不会引导我进入下一页。有什么想法吗？

e.preventDefault（）停止链接的默认操作，防止链接实际移动到任何地方。如果重新加载页面，则需要传递要突出显示的选项卡。其他选项是使用Ajax加载页面。如果必须重新加载页面，则应该考虑使用CSS来突出当前的Navaitem而不是JavaScript。查看此链接了解更多信息：不使用
e.preventDefault（）它帮助了我，因为如果我添加
e.preventDefault（）它停止了链接的工作。这也意味着当你进入页面时，而不仅仅是当你点击页面时，页面被选中。谢谢，我所做的是将代码保留在click处理程序之外，这样无论您在哪个页面上，代码都会触发，而不依赖于要运行的click事件。因此，与点击导航栏链接并访问新页面（破坏效果）不同，代码只需在页面加载时运行，以突出显示所需的导航元素。TLDR：不要让导航元素高亮显示依赖于点击链接，将其添加到app.js中，以便在加载任何页面后可以触发。你知道如何为子导航项目创建相同的选项吗？
<!-- Bootstrap 3.3.6 part of navigation -->
<ul class="nav navbar-nav">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
    <li><a href="#">Fifth</a></li>
    <li><a href="#">Sixth</a></li>
</ul>

<!-- Page name indicator -->
<span id="page-indicator" class="hidden"><?= $pageName = 'Third' ?></span>

<!-- jQuery 1.11.3 -->
<script>
    $(document).ready(function () {
        $('.navbar-nav li').each(function () {
            if ($(this).text() == $('#page-indicator').text()) {
                $(this).addClass('active');
            }
        });
    });
</script>

<script>
  $(window).load(function(){
      var url = window.location.href;
      $('nav li').find('.active').removeClass('active');
      $('nav li a').filter(function(){
          return this.href == url;
      }).parent().addClass('active');
  });
</script>