Я изо всех сил стараюсь добавить активный класс в свои навигационные меню с ajax

Question

Я использовал ajax на своем сайте для динамического загрузки страниц и добавления хешей в URL-адреса, чтобы сохранить историю и кнопку возврата назад, и для этого я использую плагин jquery bbq на html5 history api, и я должен сказать, что все работает нормально, кроме одной проблемы, и это активный класс по текущей ссылке.

У меня есть две навигации главное меню, который только на главной странице, а второй один включается на каждой странице с PHP include функции и ее вид в subnav главного меню.

как я сказал, что моя проблема: Как добавить активный класс к любой ссылке, на которую нажимают, чтобы ее внешний вид отличался от других, и пользователи должны знать, где они находятся прямо сейчас!

я пробовал разные методы, но только те работы с main menu и какие-то проблемы с secondary nav для лучшего понимания, пожалуйста, смотреть этот video

, как вы можете увидеть в видео он прекрасно работает на main menu, но только добавляет класс secondary menu после клика один раз по любой ссылке, затем нажмите другую ссылку, а затем вернитесь к исходной ссылке, более того, когда я обновляю ее, удаляется активный класс.

вот мой код.

Главное меню

<div id="vertical-menu"> 
    <!--<h2 class="logo">LOGO</h2>--> 
    <div class="logo"> 
     <span class="arcd-male97"></span> 
     <h2 class="logo-name">AMR</h2> 
     <h6 class="logo-desc">ARCADE MUSIC REPOSITORY</h6> 
    </div> 

    <nav> 
     <ul id='menu' class="menu-items"> 
      <li><a href="#Browse/Browse_Page0.php"><i class="arcd-archive"></i></br>Browse</a></li> 
      <li><a href="#Top_albums/Top_albums_Page0.php"><i class="arcd-music97"></i></br>Top albums</a></li> 
      <li><a href="#Top_artists/Top_artists_Page0.php" ><i class="arcd-microphone52"></i></br>Top artists</a></li> 
      <li><a href="#Top_lists/Top_lists_Page0.php" ><i class="arcd-numbered8"></i></br>Top lists</a></li> 
      <li><a href="#Charts/Charts_Page0.php" ><i class="arcd-rising9"></i></br>Charts</a></li> 
     </ul> 
    </nav> 
</div> 

вторичный Navbar

<div class="header_container" id="header_container"> <!--start header div--> 
    <div id="header_titles"> 
     <h1 class="browse-heading">BROWSE</h1> 
     <h2 class="browse-subheading">GENRES & MOODS</h2> 
    </div> 
</div> <!--end header div--> 

<div id="tabnav_container"> <!--start tabnav_container--> 
    <div class="navtab_background"></div> 
    <nav> 
     <ul id="tabnav"> 
      <li class="pop_tab"><a href="#Browse/Browse_Page1.php"><i class="arcd-microphone352"></i>pop</a></li> 
      <li class="country_tab"><a href="#Browse/Browse_Page2.php"><i class="arcd-guitarcountry"></i>country</a></li> 
      <li class="rock_tab"><a href="#Browse/Browse_Page3.php"><i class="arcd-electricclone"></i>rock</a></li> 
      <li class="blues_tab"><a href="#Browse/Browse_Page4.php"><i class="arcd-harmonicblues"></i>blues</a></li> 
      <li class="edm_tab"><a href="#Browse/Browse_Page5.php"><i class="arcd-disc62edm"></i>edm</a></li> 
      <li class="jazz_tab"><a href="#Browse/Browse_Page6.php"><i class="arcd-trumpet12jazz"></i>jazz</a></li> 
      <li class="rnb_tab"><a href="#Browse/Browse_Page7.php"><i class="arcd-mic102"></i>r&b</a></li> 
      <li class="hip-hop_tab"><a href="#Browse/Browse_Page8.php"><i class="arcd-musicplayer1hiphop"></i>hip hop</a></li> 
      <li class="reggae_tab"><a href="#Browse/Browse_Page9.php"><i class="arcd-mic102"></i>reggae</a></li> 
      <li class="classical_tab"><a href="#Browse/Browse_Page10.php"><i class="arcd-violin62classical"></i>classical</a></li> 
      <li class="folk_tab"><a href="#Browse/Browse_Page11.php"><i class="arcd-guitar92folk"></i>folk</a></li> 
      <li class="soul_tab"><a href="#Browse/Browse_Page12.php"><i class="arcd-mic102"></i>soul</a></li> 
     </ul> 
    </nav> 
</div><!--end tabnav_container--> 

и это Ajax скрипт

$(function() { 
    // Keep a mapping of url-to-container for caching purposes. 
    var cache = { 
     // If url is '' (no fragment), display this div's content. 
     '': $('#default-homepage-contents') 
    }; 

    // Bind an event to window.onhashchange that, when the history state changes, 
    // gets the url from the hash and displays either our cached content or fetches 
    // new content to be displayed. 
    $(window).bind('hashchange', function(e) { 

     // Get the hash (fragment) as a string, with any leading # removed. Note that 
     // in jQuery 1.4, you should use e.fragment instead of $.param.fragment(). 
     var url = $.param.fragment(); 

     // Hide any visible ajax content. 
     $('#main-container').children(':visible').hide(); 

     if (cache[ url ]) { 
      // Since the element is already in the cache, it doesn't need to be 
      // created, so instead of creating it again, let's just show it! 
      cache[ url ].fadeIn(1000); 

     } else { 
      // Show "loading" content while AJAX content loads. 
      $('#loading').delay(500).show(); 

      // Create container for this url's content and store a reference to it in 
      // the cache. 
      cache[ url ] = $('<div class="bbq-item"/>') 

      // Append the content container to the parent container. 
      .appendTo('#main-container') 

      // Load external content via AJAX. Note that in order to keep this 
      // example streamlined, only the content in .infobox is shown. You'll 
      // want to change this based on your needs. 
      .load(url, function() { 
       // Content loaded, hide "loading" content. 
       $('#loading').fadeOut(1000); 
      }); 
     } 
    }) 

    // Since the event is only triggered when the hash changes, we need to trigger 
    // the event now, to handle the hash the page may have loaded with. 
    $(window).trigger('hashchange'); 
}); 

спасибо за любую помощь!

Answer 1

У меня были проблемы с новыми браузерами и нашел это, я думаю, что только правильно работает плагин: jquery address и документы здесь: http://www.asual.com/jquery/address/docs/#api-reference пример использования является

$(function() { 
    //push it to history 
    $('#tabnav > li').click(function(e) { 
     e.preventDefault(); 
     $.address.parameter("browse", $(this).attr("href"), false); 
    }); 

    //catch changes 
    $.address.change(function() { 
     $.each($.address.parameterNames(), function (index, value) { 
      url = $.address.parameter(value); 
      $('a[href="'+url+'"]').addClass('active'); 
     }); 
    }); 
});