Question

我想在菜单中实现here之类的内容。

代码：

<ul id="navi">
    <li><a class="menu" href="page1#">About MHG</a></li>
    <li><a class="menu" href="page2#">Workout Programs</a></li>
    <li><a class="menu" href="page3#">Fitness Tips</a></li>
    <li><a class="menu" href="page4#">Contact Us</a></li>          
    <li><a class="menu" href="page5#">Read Our Blog</a></li>
</ul>

$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

我的页面中有<a>个标签，但点击这些标签请求转到服务器端，当我的页面在服务器响应后加载时，CSS丢失，这是因为一个新的明显原因页面已加载。

问题

在服务器响应之后，选择CSS标签之后我刚申请的<a>是否存在{{1}}这种情况的替代方案？

Answer 1

尝试此操作，使用e.preventDefault()可以阻止触发事件的默认操作。

$('a.menu').click(function(e){
    e.preventDefault();
    $('a.menu').removeClass("active");
    $(this).addClass("active");
 });

更新

根据问题的更新

解决这个问题的最简单方法是使用CSS。一种常见的方法是在body上创建一个代表您所在页面的类。然后你可以根据它设置CSS。

示例

关于页面：

<body class="about"> <ul> <a class="about-link>About</a> <ul> </body>

CSS：

.about .about-link { color: red; }

然后，您可以为每个页面提供css，它只会定位正确的链接。

Answer 2

您应该检查所服务的页面，然后相应地给它一个类。根据您使用的模式以及使用Scriplets或JSTL，有几种方法可以在JAVA中执行此操作。

最简单的方法是，获取您所在页面的URI：

<% String thisPage = request.getRequestURI();%>

...并在构建导航时对其进行测试。如果匹配，则添加类：

<ul id="navi">
    <li><a class="menu <% if(thisPage.equals("/page1.jsp")){out.println("active");}%>" href="/page1.jsp">Page 1</a></li>
    <li><a class="menu <% if(thisPage.equals("/page2.jsp")){out.println("active");}%>" href="/page2.jsp">Page 2</a></li>
    <li><a class="menu <% if(thisPage.equals("/page3.jsp")){out.println("active");}%>" href="/page3.jsp">Page 3</a></li>
</ul>

服务器响应后删除CSS

2 个答案:

更新