jsp+jquery jsp封装头部导航后,点击导航栏对应页面,页面跳转,但对应导航栏不高亮

一般我们会使用$(this).addClass(“add”).siblings().removeClass(“add”);被点击li添加样式,移除兄弟样式这样的方法.
可是我们前端把写好的html页面发给后端集成jsp后失效了,造成这样的原因是jsp页面,头部,底部,内容部分分开封装再集合到一起,导航栏点击后地址栏改变,跳转后会刷新页面,所以使用上面这种方法,部分情况会不奏效.所以提供以下一个简单的方法可解决此问题
在这里插入图片描述
首先我们在导航栏,点击跳转的地方使用type拼接一个参数,我这里拼的是下标
在这里插入图片描述
在这里插入图片描述

var ur =location.href
var type = ur.split('?')[1].split("=")[1];
$(".mainNavs li").eq(type).addClass("activeNav").siblings().removeClass("activeNav");

之后在对应的页面获取到地址栏拼接的参数,作为下标传入,然后在对应下面的li标签添加高亮的class样式即可

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个问题通常是因为你在点击左侧导航栏后,整个页面会发生刷新或跳转,导致左侧信息也被重置了。解决这个问题有两种方法: 1. 使用前端框架,例如 Vue、React 等,实现单页应用(SPA)的效果,在不刷新页面的情况下切换右侧内容。这样就不会重置左侧信息了。 2. 使用 AJAX 技术,在点击左侧导航栏时,异步请求右侧内容并更新右侧区域,同时保留左侧信息的状态。这个方法需要后端提供对应的接口,以供前端异步请求数据。 下面是一个简单的示例代码,使用 jQuery 实现点击左侧导航栏异步加载右侧内容: ```html <!DOCTYPE html> <html> <head> <title>左右布局</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="sidebar"> <ul> <li><a href="#" data-target="content1">内容1</a></li> <li><a href="#" data-target="content2">内容2</a></li> <li><a href="#" data-target="content3">内容3</a></li> </ul> </div> <div class="content"> <p>请选择左侧导航栏中的项</p> </div> <script> $(function() { $('.sidebar a').click(function(event) { event.preventDefault(); // 阻止默认跳转行为 var target = $(this).data('target'); // 获取目标内容的标识 $('.content').load(target + '.html'); // 使用 jQuery 的 load 方法异步加载内容 }); }); </script> </body> </html> ``` 在上面的示例中,左侧导航栏使用 `<a>` 标签,并通过 `data-target` 属性指定目标内容的标识,例如 `data-target="content1"` 表示目标内容的标识为 `content1`。右侧内容区域使用 `<div class="content">`,初始显示一段默认的提示文字。在 JavaScript 中,使用 jQuery 的 `$('.sidebar a').click` 绑定点击事件,并阻止默认跳转行为。然后获取目标内容的标识,并使用 jQuery 的 `load` 方法异步加载对应的内容。在这个示例中,目标内容的 HTML 文件命名为 `content1.html`、`content2.html`、`content3.html`,对应标识为 `content1`、`content2`、`content3`。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值