Home > Backend Development > PHP Tutorial > javascript - How to correctly highlight the navigation links of the current page?

javascript - How to correctly highlight the navigation links of the current page?

WBOY
Release: 2016-10-17 09:30:16
Original
1532 people have browsed it

javascript - How to correctly highlight the navigation links of the current page?
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.

Reply content:

javascript - How to correctly highlight the navigation links of the current page?
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 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 #

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template