jquery怎么让a标签跳转后保持tab的样式

小宇
  • 423

如下图,这个html的header是共用的,我现在想让页面跳转过去,但又要保证样式在点击跳转之后有保持select,我用location.href在js里控制跳转还是不行,应该是重新加载了,

该咋么办捏,哪位大哥帮帮我~
clipboard.png

clipboard.png

我想搞成segment这种
clipboard.png

回复
阅读 3.4k
6 个回答

方案一:根据你的网址确定哪个a标签高亮显示
1.获取网址:

console.log(location.href)
//https://segmentfault.com/q/1010000009520710 我测试的是当前页

2.根据网址查询关键词,参考你的代码可以发现每个a标签网址都有关键词 首页=‘’ 招聘美工=‘shejishi’ 美工作品=‘zuopin’
3.根据你所找到的关键词 判断哪一个a标签高亮

注:这个比较简单不过可能不会很灵活,如果导航不确定的话,关键词也就不确定,这样不便于代码维护

方案二:通过网址传参
1.修改a链接‘sheijishi/list?index=1’,‘zuopin/list?index=2’
2.通过a链接获取index值,设置对应a标签高亮
注: 这个比较灵活,只是看上去网址有点复杂,不美观,还有个小问题就是如果用户直接输入‘shejishi/list’的话就没有对应的高亮效果了

方案三:localStorage 刚才楼上那位大神也都提过了,正常操作的话是没有问题的,如果用户点击过‘sheijishi/list’,有直接新标签页打开首页的话 高亮的会是‘招聘美工’菜单

方法挺多,看你个人想法确定具体方案

判断下当前页面是哪个li,然后给它的子a标签加上加上select就行了吧

例如 每个页面定义一个 var currentTab = '';

比如美工作品页面 var currentTab = 'zuopian';

html
<ul>
<li class='shejishi'><a>招聘美工</a></li>
<li class='zuopian'><a>美工作品</a></li>
</ul>

js

$(function(){
   var currentTab = 'zuopian';
   $('.'+currentTab).find('a').addClass('select'); 

})

毛瑞
  • 2.8k

jsp是这样处理的:

<jsp:include page="menu.jsp">
    <jsp:param name="item" value="jquery" />
</jsp:include>

在menu.jsp取得参数值的方法: ${param.item}

也可用JS处理:

<script type="text/javascript" src="/media/js/menu.js" id="menu-js" data-item="jquery"></script>

在menu.js里取得参数:

var item = $("#menu-js").data("item");
alert("=="+item);

跳转之后 ,把tab的index给带过去,,, 用js处理下,

最简单的办法就是传参,如果你对以前的浏览器不要求的话可以用localStorage来保存相关值,到哪个页面就读值然后初始化就行了

田超
  • 119

如果是php 可以这样<a class="<?php if(($_SERVER['REQUEST_URI']=='/zhaopin/list')){echo 'select';}else{echo '';} ?>">

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏