时间戳

首页 > 解决方案 > 在菜单中添加活动类

jquery - 在菜单中添加活动类

问题描述

我通过 jQuery 在 nav > ul >li 中添加 class="active" 以更改背景颜色。它在 href="#" 时工作。但是当我在 href="example.php" 之间添加链接时 - 它转到页面。但是活跃的课程没有工作，背景也没有显示我在哪里。

是否可以通过 jQuery 显示我现在所在的页面或它们在 WP 中的工作方式以及背景更改？

$(document).ready(function(){
$(".menu").on('click','li', function(){
    $(".menu .active").removeClass('active');
    $(this).addClass('active');

} );

});

<ul class="menu">
    <li class="active"><a href="index.php">Home</a></li>
    <li><a href="bestdeal.php">Best Deal</a></li>
    <li><a href="#">Shop</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

标签： jquerymenu

解决方案

您可以尝试检查页面 href 是否与您的链接完全匹配，以防它不是#链接。

$(document).ready(function(){
  var $links = $('.menu li a');
  
  $links.closest('.active').removeClass('active');
  
  $links.filter(function(){
    return this.href === window.location.href;
  }).closest('li').addClass('active');
});
.active a { color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
    <li class="active"><a href="index.php">Home</a></li>
    <li><a href="/js">My Amazing Code Snippet on Stack Overflow</a></li>
    <li><a href="#">Shop</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

推荐阅读