Keep selected after navigation jump jquery highlight currently selected menu

Source: Internet
Author: User

Functional Requirements:
Today in writing a site need to use the navigation menu click the link to jump to a new page, highlight the current menu style.
Simply put, I click on the navigation menu in a section, jump to the column, the menu is also highlighted (can be background color can also be a background image)

Workaround:
By looking at the instance, we need to use jquery in JS to achieve this effect, or you can set the a:hover of different pages by CSS, but this is obviously a clumsy approach.
So, how to use JS to achieve the effect of the implementation of the principle is to use the location.href in JS to get the current page address, and then on the navigation link to the address of the pair, the same is a CSS style tag. This method supports dynamic linking and static linking in many forms.

The code is as follows:

[JavaScript]View PlainCopy
    1. <script type= "Text/javascript" src= "Jquery.min.js" ></script>
    2. <style>
    3. . menu {padding:0; margin:0; list-style-type:none;}
    4. . menu Li {background: #FFD1A4; margin-right:1px;  float:left; color: #fff;}
    5. . menu Li a {display:block; width:80px; text-align:center; height:32px; line-height:32px; color: #fff; font-size:13px; Tex T-decoration:none;}
    6. . cur{background: #D96C00; font-weight:bold;}
    7. </style>
    8. <ul class= "menu" id= " Menu" >
    9. <li><a href= "a.html" > Home </a></li>
    10. <li><a href= "b.html" >seo optimization </a></li>
    11. <li><a href= "c.html" > Life Entertainment </a></li>
    12. </ul>
    13. <script type= "Text/javascript" >
    14. var urlstr = location.href;
    15. Alert ((Urlstr + '/'). IndexOf ($ (this). attr (' href ')));
    16. var urlstatus=false;
    17. $ ("#menu a"). each (function () {
    18. if ((Urlstr + '/'). IndexOf ($ (this). attr (' href ')) > -1&&$ (This). attr (' href ')! = ") {
    19. $ (this). addclass (' cur '); urlstatus = true;
    20. } Else {
    21. $ (this). Removeclass (' cur ');
    22. }
    23. });
    24. if (!urlstatus) {$ ("#menu a"). EQ (0). addclass (' cur ');}
    25. </script>
    26. From 62216550

Keep selected after navigation jump jquery highlight currently selected menu

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.