Активная навигация с помощью jQuery - невозможно применить класс по умолчанию для привязки

Question

В настоящее время я пытаюсь создать навигационное меню, в котором к якорям применяется активный класс с hrefs, соответствующими текущему URL, поэтому я могу стилизовать этот якорь таким образом, чтобы он выделялся среди остальных элементов. меню.

Это моя наценка:

<div id="sidebar">

<h2>Navigation menu</h2>

<h2 class="subnav"><a href="menu1/menu_item1">Menu item 1</a></h2>
<h2 class="subnav"><a href="menu1/menu_item2">Menu item 2</a></h2>
<h2 class="subnav"><a href="menu1/menu_item3">Menu item 3</a></h2>
<h2 class="subnav"><a href="menu1/menu_item4">Menu item 4</a></h2>
<h2 class="subnav"><a href="menu1/menu_item5">Menu item 5</a></h2>

</div> 

Это jQuery:

   jQuery(function($) {

    // get the current url
    var path = location.pathname.substring(1); 

    // defining the top subnav anchor
    var $top_item = $('#sidebar h2:nth-child(2) a'); 

    // defining all subnav anchors
    var $all_items = $('#sidebar h2.subnav a'); 

    // defining the anchors with a href that matches the current url
    var $selected_item = $('#sidebar h2 a[@href$="' + path + '"]'); 

    // setting the selected menu item'class as active
    $selected_item.addClass('active'); 

    // THIS IS WHERE I THINK THE ERROR IS
    // if none of the h2.subnav's has a url that matches 
    // the current location then assume that it's the top one that's active:
    if ($all_items("href") !== path) $top_item.addClass('active');

});

Я применяю активный класс с jQuery, он работает нормально, пока есть соответствие между href якоря и URL местоположения. Если URL не совпадает ни с одним из якорей, я хочу, чтобы активный класс был применен к $ top_item. Эта часть моего jQuery не работает.

Я не вижу, в чем ошибка, но опять же, я чем-то вроде Javascript / jQuery n00b. Любая помощь будет оценена.

Answer 1

Для этого нужно, чтобы вы захотели: пометить соответствующую ссылку, а в противном случае отметьте вашу ссылку по умолчанию.

function markActiveLink() {

    //Look through all the links in the sidebar
   $("div#sidebar a").filter(function() {

      //Take the current URL and split it into chunks at each slash
      var currentURL = window.location.toString().split("/");

      //return true if the bit after the last slash is the current page name
      return $(this).attr("href") == currentURL[currentURL.length-1];

    //when the filter function is done, you're left with the links that match.
    }).addClass("active");

   //Afterwards, look back through the links. If none of them were marked,
   //mark your default one.
   if($("div#sidebar a").hasClass("active") == false) {
      $("div#sidebar h2:nth-child(2) a").addClass("active");
    }
 }

markActiveLink();

Кроме того, я нашел официальный учебник по этому на сайте JQuery Docs - прокрутите вниз, чтобы увидеть код jQuery. Он крепче моего, хотя и не приспособлен к вашей ситуации.

Answer 2

отлично читаю ... но я должен сделать предложение ... даже если JS работает отлично, вы действительно должны хранить все пункты списка меню в неупорядоченном списке (или упорядоченном списке), ... в качестве лучшей практики ... :)

Answer 3

Дайте этому коду шанс, это то, что я собрал для компании, в которой я работаю.

// highlight tab function
var path = location.pathname;
var home = "/";
$("a[href='" + [path || home] + "']").parents("li").each(function() {   
    $(this).addClass("selected");
});

Answer 4

Я думаю, вы можете немного упростить это:

function highlightSelected()
{
  $("h2.subnav a").each(
    function()
    {
      if (location.pathname.indexOf(this.href) > -1)
      {
        $(this).addClass("selected");
      }
    }
  );
}