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
- <script type= "Text/javascript" src= "Jquery.min.js" ></script>
- <style>
- . menu {padding:0; margin:0; list-style-type:none;}
- . menu Li {background: #FFD1A4; margin-right:1px; float:left; color: #fff;}
- . menu Li a {display:block; width:80px; text-align:center; height:32px; line-height:32px; color: #fff; font-size:13px; Tex T-decoration:none;}
- . cur{background: #D96C00; font-weight:bold;}
- </style>
- <ul class= "menu" id= " Menu" >
- <li><a href= "a.html" > Home </a></li>
- <li><a href= "b.html" >seo optimization </a></li>
- <li><a href= "c.html" > Life Entertainment </a></li>
- </ul>
- <script type= "Text/javascript" >
- var urlstr = location.href;
- Alert ((Urlstr + '/'). IndexOf ($ (this). attr (' href ')));
- var urlstatus=false;
- $ ("#menu a"). each (function () {
- if ((Urlstr + '/'). IndexOf ($ (this). attr (' href ')) > -1&&$ (This). attr (' href ')! = ") {
- $ (this). addclass (' cur '); urlstatus = true;
- } Else {
- $ (this). Removeclass (' cur ');
- }
- });
- if (!urlstatus) {$ ("#menu a"). EQ (0). addclass (' cur ');}
- </script>
- From 62216550
Keep selected after navigation jump jquery highlight currently selected menu