javascript - jquery怎麼讓a標籤跳轉後保持tab的樣式

Question

如下圖，這個html的header是共用的，我現在想讓頁面跳轉過去，但又要確保樣式在點擊跳轉之後有保持select，我用location.href在js裡控制跳轉還是不行，應該是重新載入了，

該咋麼辦捏，哪位大哥幫我~

#我想搞成segment這種

Answer 1

方案一：依照你的網址決定哪個a標籤高亮顯示
1.取得網址：

console.log(location.href)
///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'，有直接新標籤頁打開首頁的話高亮的會是'招聘美工'菜單

方法蠻多，看你個人想法確定具體方案

Answer 2

判斷下目前頁面是哪個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'); 

})

Answer 3

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);

Answer 4

跳轉之後 ，把tab的index帶過去，，， 用js處理下，

Answer 5

最簡單的辦法就是傳參，如果你對以前的瀏覽器不要求的話可以用localStorage來保存相關值，到哪個頁面就讀值然後初始化就行了

Answer 6

如果是php 可以這樣