jQuery navigation. when I click on a link to go to a new page I want to see that link highlighted after the new page is opened -

hi need making navigation show active link highlighted on current page. in other words when click on link go new page want see link highlighted after new page opened. handle css adding class active link on each page since there's going many pages prefer dynamically jquery.

html

  <div class="nav center">         <ul  id="1stmenu">             <li><a href="#sub_1" id="cate_1" class="links">main #1</a></li>             <li><a href="#sub_2" id="cate_2" class="links">main #2</a></li>             <li><a href="#sub_3" id="cate_3" class="links">main #3</a></li>             <li><a href="#sub_4" id="cate_4" class="links">main #4</a></li>         </ul>     </div>     <div class="snav_con">             <ul class="snav center divs" id="sub_1">                 <li><a href="/">please</a></li>                 <li><a href="/">help</a></li>                                                 <li><a href="/">me</a></li>             </ul>             <ul  class="snav center divs" id="sub_2">                 <li><a href="/">please2</a></li>                 <li><a href="/">help2</a></li>                                                 <li><a href="/">me2</a></li>             </ul>             <ul class="snav center divs"  id="sub_3">                 <li><a href="/">please3</a></li>                 <li><a href="/">help3</a></li>                                                 <li><a href="/">me3</a></li>             </ul>             <ul class="snav center divs" id="sub_4">                 <li><a href="/">please4</a></li>                 <li><a href="/">help4</a></li>                                                 <li><a href="/">me4</a></li>             </ul>     </div> 

css

.highlight{} .highlight a{font-weight:bold;color:#000;text-shadow:0 0 5px #fff;} .visible{display:block;}  .selected{background-image:url('/images/nav_bg.png');} .selected a{color:#fafafa;font-weight:bold;font-style:normal;text-shadow:0px -1px 0 #000;}       .nav{position: relative;margin:0 auto;width:1000px;height:40px;font-size:12px;text-align:center;line-height:40px;*display: inline-block;}     .nav ul {margin: 0;padding: 0;*margin-left:230px;}     .nav li {margin: 0 5px 10px 0;adding: 0;list-style: none;display: inline-block;font-weight:400;line-height:40px;*float:left;font-family:raleway;}     .nav {padding: 3px 12px;text-decoration: none;line-height: 100%;font-family:raleway;color:#fff;}     .nav a:hover {}     .nav .current {border-radius: 5px;font-weight:bold;}     /* center nav */     .nav.center ul {text-align:center;margin-top:2px;}     .snav_con{width:1000px;height:40px;overflow:hidden;margin:0;padding:0;*position:relative;}     .snav {position: relative;margin:0 auto;width:1000px;height:40px;line-height:40px;font-size:11px;padding:0;}     .snav ul {margin: 0;padding: 0;}     .snav li {margin:0;padding: 0;list-style: none;text-align:center;width:160px;height:40px;line-height:40px;display: inline-block;*float:left;}     .snav ul li:hover {/*background-image:url('../images/nav_bg.png');*/}     .snav {padding: 3px 12px;text-decoration: none;color: #ddd;line-height: 100%;font-family:raleway;}     .snav a:hover {color: #fafafa;}     .snav li:hover {color: #fafafa;} 

jquery

 $(document).ready(function() {        $('.links').click(function(event){        $('.snav').hide();         event.preventdefault();         var targetdiv = $($(this).attr('href'));          $('.links').removeclass("visible");         if(targetdiv.css("display") == "none")         {             $(targetdiv).addclass("visible");         }       targetdiv.siblings().hide();       targetdiv.fadein('slow');      });        $(document).ready(function() {      current_page = document.location.href;      if (current_page.match(/cate_no=1/)){     $("ul#1stmenu li:eq(0)").addclass('highlight');     }else  if (current_page.match(/cate_no=2/)){     $("ul#1stmenu li:eq(1)").addclass('highlight');     }else if (current_page.match(/cate_no=3/)){     $("ul#1stmenu li:eq(2)").addclass('highlight');     }else if (current_page.match(/cate_no=4/)){     $("ul#1stmenu li:eq(4)").addclass('highlight');     }else if (current_expage.match(/cate_no=5/)){     $("ul#1stmenu li:eq(3)").addclass('highlight');     }else{ // don't mark nav links selected     $("ul#1stmenu li").removeclass('highlight');};     });        $(document).ready(function() {      // store url current page global variable     current_page = document.location.href      // apply selected states depending on current page     if (current_page.match(/cate_no=11/)) {     $("ul#sub_1 li:eq(0)").addclass('selected');     } else if (current_page.match(/cate_no=12/)) {     $("ul#sub_1 li:eq(1)").addclass('selected');     } else if (current_page.match(/cate_no=13/)) {     $("ul#sub_1 li:eq(2)").addclass('selected');     } else if (current_page.match(/cate_no=14/)) {     $("ul#sub_1 li:eq(3)").addclass('selected');     } else if (current_page.match(/cate_no=15/)) {     $("ul#sub_1 li:eq(4)").addclass('selected');     } else if (current_page.match(/cate_no=16/)) {     $("ul#sub_1 li:eq(5)").addclass('selected');     } else { // don't mark nav links selected     $("ul#sub_1 li").removeclass('selected');     };});   }); 

you still want add class... let's programmatically w/jquery (sidebar: html ids cannot begin number).

hash-change links can done simple on click, since not reload page:

$('#first-menu').on('click', 'a', function(e){ // note: "1st-menu" != valid id     $(this).parent().addclass('highlight')         .siblings().removeclass('highlight'); }); 

other menu item's need compared against location.pathname (sidebar #2: snav_con should id since used once. ids faster find classes using jquery's selector engine).

$('#snav_con').find('a').each(function(){ // snav_con an id     if ( $(this).attr('href') == window.location.pathname )         $(this).addclass('highlight'); });