javascript - jquery怎么讓a標(biāo)簽跳轉(zhuǎn)后保持tab的樣式
問題描述
如下圖,這個(gè)html的header是共用的,我現(xiàn)在想讓頁面跳轉(zhuǎn)過去,但又要保證樣式在點(diǎn)擊跳轉(zhuǎn)之后有保持select,我用location.href在js里控制跳轉(zhuǎn)還是不行,應(yīng)該是重新加載了,
該咋么辦捏,哪位大哥幫幫我~
我想搞成segment這種
問題解答
回答1:方案一:根據(jù)你的網(wǎng)址確定哪個(gè)a標(biāo)簽高亮顯示 1.獲取網(wǎng)址:
console.log(location.href)///q/1010000009520710 我測(cè)試的是當(dāng)前頁
2.根據(jù)網(wǎng)址查詢關(guān)鍵詞,參考你的代碼可以發(fā)現(xiàn)每個(gè)a標(biāo)簽網(wǎng)址都有關(guān)鍵詞 首頁=‘’ 招聘美工=‘shejishi’ 美工作品=‘zuopin’3.根據(jù)你所找到的關(guān)鍵詞 判斷哪一個(gè)a標(biāo)簽高亮
注:這個(gè)比較簡(jiǎn)單不過可能不會(huì)很靈活,如果導(dǎo)航不確定的話,關(guān)鍵詞也就不確定,這樣不便于代碼維護(hù)
方案二:通過網(wǎng)址傳參1.修改a鏈接‘sheijishi/list?index=1’,‘zuopin/list?index=2’2.通過a鏈接獲取index值,設(shè)置對(duì)應(yīng)a標(biāo)簽高亮注: 這個(gè)比較靈活,只是看上去網(wǎng)址有點(diǎn)復(fù)雜,不美觀,還有個(gè)小問題就是如果用戶直接輸入‘shejishi/list’的話就沒有對(duì)應(yīng)的高亮效果了
方案三:localStorage 剛才樓上那位大神也都提過了,正常操作的話是沒有問題的,如果用戶點(diǎn)擊過‘sheijishi/list’,有直接新標(biāo)簽頁打開首頁的話 高亮的會(huì)是‘招聘美工’菜單
方法挺多,看你個(gè)人想法確定具體方案
回答2:判斷下當(dāng)前頁面是哪個(gè)li,然后給它的子a標(biāo)簽加上加上select就行了吧
例如 每個(gè)頁面定義一個(gè) 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’); })回答3:jsp是這樣處理的:
<jsp:include page='menu.jsp'> <jsp:param name='item' value='jquery' /></jsp:include>
在menu.jsp取得參數(shù)值的方法: ${param.item}
也可用JS處理:<script type='text/javascript' src='http://www.lshqa.cn/media/js/menu.js' data-item='jquery'></script>
在menu.js里取得參數(shù):
var item = $('#menu-js').data('item');alert('=='+item);回答4:
跳轉(zhuǎn)之后 ,把tab的index給帶過去,,, 用js處理下,
回答5:最簡(jiǎn)單的辦法就是傳參,如果你對(duì)以前的瀏覽器不要求的話可以用localStorage來保存相關(guān)值,到哪個(gè)頁面就讀值然后初始化就行了
回答6:如果是php 可以這樣<a class='<?php if(($_SERVER[’REQUEST_URI’]==’/zhaopin/list’)){echo ’select’;}else{echo ’’;} ?>'>
相關(guān)文章:
1. javascript - node.js promise沒用2. golang - 用IDE看docker源碼時(shí)的小問題3. yii2中restful配置好后在nginx下報(bào)404錯(cuò)誤4. 算法 - python 給定一個(gè)正整數(shù)a和一個(gè)包含任意個(gè)正整數(shù)的 列表 b,求所有<=a 的加法組合5. android 如何實(shí)現(xiàn)如圖中的鍵盤上的公式及edittext的內(nèi)容展示呢6. java - 我在用Struts2上傳文件時(shí),報(bào)以下錯(cuò)誤怎么回事?7. c++ - 如何正確的使用QWebEngineView?8. PHP注冊(cè)功能9. mysql - 求SQL語句10. MySQL如何實(shí)現(xiàn)表中再嵌套一個(gè)表?
