JavaScript-How do I correctly highlight the navigation link for the current page?

Source: Internet
Author: User



Like the above site navigation, when I click on the link will highlight the label, when I click on other pages will jump to the corresponding page, and the current page corresponding to the navigation label will be highlighted, what is the general design plan? What are the good, elegant solutions? Solution.
The solution I personally think of is:
1, in the Windows load time to traverse the URL of these tags, if and the current page URL of the same page is highlighted;
2, using a cookie to store the current click of the navigation index, and then go to the current page to read the index value, the index value tag tags added highlighting;

Feel that these two methods are a bit unreliable, seeking a better idea.

Reply content:



Like the above site navigation, when I click on the link will highlight the label, when I click on other pages will jump to the corresponding page, and the current page corresponding to the navigation label will be highlighted, what is the general design plan? What are the good, elegant solutions? Solution.
The solution I personally think of is:
1, in the Windows load time to traverse the URL of these tags, if and the current page URL of the same page is highlighted;
2, using a cookie to store the current click of the navigation index, and then go to the current page to read the index value, the index value tag tags added highlighting;

Feel that these two methods are a bit unreliable, seeking a better idea.

Javascript

You can use the property of element A and the URL of the href page to determine

You can also add a custom data property to each element, such as a data-pattern regular match on the inside
jsfiddle:https://jsfiddle.net/bd4g5f2h/

Feel no need for this, originally on 35 pages. You create a highlighted class. Then you can set a highlighted navigation for each page. If you're using a template engine. This step can be done with a template engine. If you are using a single page application, this situation is to consider using JS, or to judge the things behind the #

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.