Home >Backend Development >PHP Tutorial >javascript - How to correctly highlight the navigation links of the current page?
Like the website navigation above, when I click on the link, the label will be highlighted. When I click on other pages, it will jump to the corresponding page, and the navigation label corresponding to the current page will also be highlighted. Gaoliang, what is your general design plan? What's a good, elegant solution? Ask for answers.
The solution I personally thought of is:
1. Traverse the URLs of these tags when windows is loading. If they are the same as the webpage URL of the current page, highlight them;
2. Use cookies to store the navigation index of the current click. Then read the index value after entering the current page, and highlight the label marked by the index value;
I feel like these two methods are a bit unreliable, so I’m looking for a better idea.
Like the website navigation above, when I click on the link, the label will be highlighted. When I click on other pages, it will jump to the corresponding page, and the navigation label corresponding to the current page will also be highlighted. Gaoliang, what is your general design plan? What's a good, elegant solution? Ask for answers.
The solution I personally thought of is:
1. Traverse the URLs of these tags when windows is loading. If they are the same as the web URL of the current page, highlight them;
2. Use cookies to store the navigation index of the current click. Then read the index value after entering the current page, and highlight the label marked by the index value;
I feel like these two methods are a bit unreliable, so I’m looking for a better idea.
JavaScript
You can use the href
property of the a element to be the same as the page URL
You can also add a custom data attribute to each element such as data-pattern
and then put regular matching inside it
JSFiddle: https://jsfiddle.net/bd4g5f2h/
I don’t feel this is necessary, there are only three or five web pages. You create a highlighted class. Then just set a highlighted navigation for each page. If you are using a template engine. This step can be done using a template engine. If you are using a single-page application, only consider using js in this case, or judge the thing after #