如下圖,這個html的header是共用的,我現在想讓頁面跳轉過去,但又要確保樣式在點擊跳轉之後有保持select,我用location.href在js裡控制跳轉還是不行,應該是重新載入了,
該咋麼辦捏,哪位大哥幫我~
#我想搞成segment這種
伊谢尔伦2017-07-05 11:05:17
方案一:依照你的網址決定哪個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',有直接新標籤頁打開首頁的話高亮的會是'招聘美工'菜單
方法蠻多,看你個人想法確定具體方案
高洛峰2017-07-05 11:05:17
判斷下目前頁面是哪個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');
})
PHP中文网2017-07-05 11:05:17
<jsp:include page="menu.jsp">
<jsp:param name="item" value="jquery" />
</jsp:include>
在menu.jsp取得參數值的方法: ${param.item}
<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);