在菜单中添加活动类

时间:2019-03-19 18:04:54

标签: jquery menu

我通过jQuery在nav> ul> li中添加class =“ active”来更改背景颜色。它在href =“#”时工作。但是,当我在href =“ example.php”之间添加链接时-转到页面。但是活动课堂不能用,背景也不能显示我在哪里。

是否可以进行链接工作以及进行后台更改以显示我现在使用jQuery的页面或它们在WP中的工作方式?

[INFO] Building test-boot 0.0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] --- maven-resources-plugin:3.1.0:resources (default-resources) @ example ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 1 resource
[INFO] Copying 0 resource
[INFO] 
[INFO] --- maven-compiler-plugin:3.8.0:compile (default-compile) @ example ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 3 source files to /Users/puspender/git/test-lambok/test-boot/target/classes
[INFO] -------------------------------------------------------------
[ERROR] COMPILATION ERROR : 
[INFO] -------------------------------------------------------------
[ERROR] /Users/puspender/git/test-lambok/test-boot/src/main/java/com/example/TestBootApplication.java:[11,21] cannot find symbol
  symbol:   method setName(java.lang.String)
  location: variable user of type com.example.User
[ERROR] /Users/puspender/git/test-lambok/test-boot/src/main/java/com/example/TestBootApplication.java:[12,40] cannot find symbol
  symbol:   method getName()
  location: variable user of type com.example.User
[INFO] 2 errors 
[INFO] -------------------------------------------------------------
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE

});

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

} );

2 个答案:

答案 0 :(得分:1)

在不是#链接的情况下,您可以尝试检查页面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>

答案 1 :(得分:0)

是的,在更改页面时有些棘手-您需要一种将点击的标识符发送到新页面的方法。大多数时候,我们可以使用一些jQuery来做到这一点。 (jQuery将中断默认的zip操作,使用隐藏字段创建一个<a>,其中包含要发送的信息,然后<form>表单)

但是可能有一种更简单的方法...对于每个页面,只需使该页面的菜单项具有活动的类即可。

如果简单方法不起作用,那么此答案将提供一个适合您的演示:

How to pass data to another page using jquery ajax