javascript - jquery how to keep the tab style after a tag jumps

Question

As shown below, the header of this html is shared. Now I want the page to jump to it, but I also need to ensure that the style remains selected after clicking to jump. I use location.href to control the jump in js but it still doesn't work. , it should be reloaded,

What should I do? Can anyone help me~

I want to make it segment-like

Answer 1

Option 1: Determine which a tag is highlighted based on your URL
1. Get the URL:

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

2. Search for keywords based on the URL. Referring to your code, you can find that each a tag URL has the keyword homepage = '' Recruiting Artists = 'shejishi' Art Works = 'zuopin'
3. Based on the keywords you found Determine which a tag is highlighted

Note: This is relatively simple but may not be very flexible. If the navigation is uncertain, the keywords will also be uncertain, which will not facilitate code maintenance

Option 2: Pass parameters through the URL
1. Modify the a link 'sheijishi/list?index=1', 'zuopin/list?index=2'
2. Get the index value through the a link and set the corresponding a tag highlight
Note: This is more flexible, but the URL looks a bit complicated and unsightly. Another small problem is that if the user directly enters 'shejishi/list', there will be no corresponding highlighting effect

Option 3: localStorage The master above also mentioned it just now. Under normal operation, there is no problem. If the user clicks on 'sheijishi/list' and directly opens the homepage in a new tab, the highlighted one will be 'Recruitment' Artist's Menu

There are many methods, it depends on your personal thoughts to determine the specific plan

Answer 2

Determine which li the current page is, and then add select to its sub-a tag

For example, each page defines a var currentTab = '';

For example, on the art work page 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 is processed like this:

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

Method to get parameter value in menu.jsp: ${param.item}

Can also be processed with JS:

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

Get parameters in menu.js:

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

Answer 4

After the jump, bring the index of the tab,,, and use js to process it,

Answer 5

The simplest way is to pass parameters. If you don’t require the previous browser, you can use localStorage to save the relevant values. Just go to which page to read the values ​​and initialize them

Answer 6

If it is php, you can do this<a class="<?php if(($_SERVER['REQUEST_URI']=='/zhaopin/list')){echo 'select';}else{echo ''; } ?>">