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

【问题标题】：Highlight active menu item using jquery使用 jquery 突出显示活动菜单项
【发布时间】：2014-10-08 15:02:22
【问题描述】：

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

这是我到目前为止所做的：

HTML

 <section id="nav">    
        <li><a class="nav" href="editorial.html">EDITORIAL</a></li>
        <li><a class="nav" href="places.html">PLACES</a></li>
        <li><a class="nav" href="people.html">PEOPLE</a></li>
        <li><a class="nav" href="architecture.html">ARCHITECTURE</a></li>
        <li><a class="nav" href="projects.html">PROJECTS</a></li>
        <li><a class="nav" href="published.html">PUBLISHED</a></li>
</section>

CSS

#nav{
width:100%;
text-align:center;
min-width:1300px;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}

#nav li{
display:inline;
}

#nav .nav{
display:inline-block;
background-color:#000;
color:#FFF;
font-family: 'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}

#nav .nav:hover{
background:#FFFF00;
color:#000;
}

.active{
background:#FFFF00;
color:#000;
}

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

提前致谢！

【问题讨论】：

“:active 不适用于 CSS”是什么意思？它确实“有效”，但可能不是您期望的方式：css-tricks.com/almanac/selectors/a/active
什么麻烦？我从您发布的代码中创建了一个小提琴，并将鼠标悬停在项目上会突出显示它们。 jsfiddle.net/slippery_pete/8495h3L3
@SlipperyPete 悬停不是给我带来麻烦的原因，我希望链接处于活动状态时背景保持黄色。

标签： jquery hyperlink

【解决方案1】：

我使用了以下代码。迟到的答案，但我希望这会对某人有所帮助。

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

【讨论】：

它帮助了我，因为如果我添加了e.preventDefault();，它会阻止链接工作。这也意味着当您转到该页面时，该页面被选中，而不仅仅是在您单击它时。谢谢
我所做的是将代码保留在点击处理程序之外，这样无论您在哪个页面上，代码都会触发，而不依赖于运行的点击事件。因此，无需单击导航栏链接并访问新页面（破坏效果），代码只需在页面加载时运行，即可突出显示所需的导航元素。 TLDR：不要使 nav 元素突出显示依赖于对链接的点击，将其添加到您的 app.js 中，以便在任何页面加载后触发。
你知道如何为子导航项做同样的事情吗？

【解决方案2】：

$(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 */
}

【讨论】：

这太好了，谢谢！我的活动链接现在仍然突出显示。
如果我可以解决由此产生的新问题，现在菜单项不起作用。当我单击一个菜单项时，它仍然突出显示，但不会将我引导到下一页。有什么想法吗？
e.preventDefault(); 停止链接的默认操作，防止它实际上去任何地方。如果您重新加载页面，您将需要传递要突出显示的选项卡。其他选项是使用 AJAX 加载页面。
如果你必须重新加载页面，你应该考虑使用 css 来高亮当前的导航项而不是 javascript。查看此链接了解更多信息：stackoverflow.com/questions/10646775/active-menu-highlight-css
不使用e.preventDefault();

【解决方案3】：

我遇到了这个问题。我解决这个问题。

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

你可以将jsfiddledemo保存到本地进行测试。

【讨论】：

【解决方案4】：

试试这个：

$(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) 就可以了！

【讨论】：

谢谢，但不幸的是，这只会使我的整个菜单无法正常工作。

【解决方案5】：

我通过简单地遍历我的菜单 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');
           }
       });

【讨论】：

【解决方案6】：

从#page-indicator 中获取text 并将类active 设置为<li><a href="#">text</a></li>。

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

【讨论】：

【解决方案7】：

<script>
  $(document).ready(function(){
      var url = document.location.href;

      $('.navbar-nav li').removeClass('active');
      $('.navbar-nav li a').filter(function(){ 
          return this.href == url;
      }).parent().addClass('active');
  });
</script>

试试这个。效果很好。

【讨论】：