急!!js,侧边栏二级菜单点击后页面跳转后状态不变,且选中项高亮显示!

sherry_hshs 2018-03-19 03:09:42
//侧边栏jsp代码,二级菜单名是从数据库中动态读取到的
<div id ="leftMenu" class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu">
<li data-role="dropdown">
<a href="javascript:;">
<span class="title">应用<span>
<span class="arrow"><span>
</a>
<ul id ="showOpen" class="submenu">
<c:forEach items="${appDetailList}" var="appDetail">
<c:choose>
<c:when test="${appDetail.appDesc.status ==0 or appDetail.appDesc.status ==1}">
<li>
<a href="javascript:;">
<span class="title">${appDetail.appDesc.name}<span>
<span class="arrow"><span>
</a>
</li>
<li><a target="_self" href="app/index.do?appId=${appDetail.appDesc.appId}>
<span class="title">${appDetail.appDesc.name}</span>
<span class="arrow"><span>
</a>
</li>
</c:when>
</c:choose>
</c:forEach>
</ul>
</li>
</ul>
</div>

我尝试过在js里用cookie保存点击状态设置高亮,并成功了,侧边栏点击二级菜单页面刷新后不会再收缩,且选中项为高亮。
但是我现在出现了一个新的问题,当我点击侧边栏二级菜单任意一项后,再点击顶部导航栏任意链接,页面跳转后侧边栏二级菜单依旧高亮,可是我现在已经换了新的页面了,这时我想要侧边栏恢复默认状态,而不是cookie内保存的状态。
而且不仅仅是导航栏,页面内容部分有侧边栏二级菜单的链接,若是我从页面点击链接进去,这时侧边栏二级菜单是不会有相应的样式变化的。
而我现在想要的结果是,无论是点击侧边栏二级菜单还是点击页面内链接,侧边栏都要有相应的样式变化,即展开并高亮。
我感觉这种情况下用cookie不太合适,我查了下有说在链接尾部追加参数,然后点击链接后按参数展开侧边栏并赋予样式,但本人新人一个,刚学没多久,不知道咋写,望各位大神指教啊,最好能有代码~~
...全文
1421 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
依据参数来进行高亮,而不是cookie保存状态,保存的话你逻辑就的增加好多了,点击每个练级要清cookie,如果是高亮的还得设置cookie DEMO:网站导航栏目焦点设置
无聊的上午 2018-03-20
  • 打赏
  • 举报
回复
引用 3 楼 a911dalin 的回复:

 //改变左侧导航样式
            if (xxlb == 6) {
                $("#lj1").attr("class", "样式1");
                $("#lj2").attr("class", "样式2");
                $("#lj3").attr("class", "样式3");
                $("#lj4").attr("class", "样式4");
            }
            else if (xxlb == 7) {
                $("#lj1").attr("class", "样式2");
                $("#lj2").attr("class", "样式1");
                $("#lj3").attr("class", "样式4");
                $("#lj4").attr("class", "样式3");
            }
            else if (xxlb == 8) {
               //....
            }
链接后面带参数 ?xxlb=6
好麻烦的写法,既然id只有一个编号的差别,操作几乎也是一样的,为什么不用循环啊? for(...){ 所有菜单项取消选中 } 当前选中的菜单项高亮样式(当前项可以用this)
sherry_hshs 2018-03-20
  • 打赏
  • 举报
回复
解决了,我是用正则表达式获得网址中URL中?后的参数,然后和侧边栏二级菜单的中的参数作比较,有相同时对应项做出相应样式变化。 原本cookie的代码也没删,只是加了if判断。 谢谢各位啦,你们的回答都很有帮助~
zhangfei2211 2018-03-19
  • 打赏
  • 举报
回复
(1)页面传参 (2)根据页面URL判断选中哪个菜单
sherry_hshs 2018-03-19
  • 打赏
  • 举报
回复
好的,我去看看
狂彪的蜗牛 2018-03-19
  • 打赏
  • 举报
回复
你看一下request和response对象就会了
sherry_hshs 2018-03-19
  • 打赏
  • 举报
回复
额,其实我就是不知道这个该怎么去写
狂彪的蜗牛 2018-03-19
  • 打赏
  • 举报
回复
我也是新手,描述可能会啰嗦。 你跳转页面的时候会传参譬如是A,后台拿到这个参数A就知道要打开哪个页面,渲染新页面的时候你把这个参数A传过来,拿A和侧边栏的相应参数做对比。
sherry_hshs 2018-03-19
  • 打赏
  • 举报
回复
我的思路其实是想,无论点击侧边栏还是页面中的任何链接,跳转的时候都读取一下链接后面的参数,再和侧边栏二级菜单链接带的参数做个比较,要是相同的话,就展开侧边栏二级菜单,相对应项高亮显示,但是我不知道这个js怎么写?
sherry_hshs 2018-03-19
  • 打赏
  • 举报
回复
我还是有点不太明白,我的二级菜单后面其实有参数的,app/index.do?appId=${appDetail.appDesc.appId},比如app/index.do?appId=1998,不过1998这些数是用el表达式从数据库中动态读取的,你的意思是要我根据这个参数去判断?
狂彪的蜗牛 2018-03-19
  • 打赏
  • 举报
回复

 //改变左侧导航样式
            if (xxlb == 6) {
                $("#lj1").attr("class", "样式1");
                $("#lj2").attr("class", "样式2");
                $("#lj3").attr("class", "样式3");
                $("#lj4").attr("class", "样式4");
            }
            else if (xxlb == 7) {
                $("#lj1").attr("class", "样式2");
                $("#lj2").attr("class", "样式1");
                $("#lj3").attr("class", "样式4");
                $("#lj4").attr("class", "样式3");
            }
            else if (xxlb == 8) {
               //....
            }
链接后面带参数 ?xxlb=6
sherry_hshs 2018-03-19
  • 打赏
  • 举报
回复
来人啊
sherry_hshs 2018-03-19
  • 打赏
  • 举报
回复
没有人吗

87,993

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧