thomson - Navegación activa con jQuery: no se puede aplicar una clase predeterminada al ancla

nav menu jquery

Question

Actualmente estoy tratando de crear un menú de navegación en el que se aplique una clase activa a los anclajes con hrefs que coincidan con la url actual, por lo que puedo diseñar ese anclaje de manera que destaque del resto del menú.

Este es mi margen de beneficio:

<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> 

Este es el 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'');

});

Estoy aplicando la clase activa con jQuery, funciona bien siempre que haya una coincidencia entre un href de anclaje y la url de ubicación. Si la url no coincide con ninguno de los anclajes, quiero que la clase activa se aplique al $ top_item. Esa parte de mi jQuery no funciona.

No puedo ver cuál es el error, pero de nuevo soy un Javascipt / jQuery n00b. Cualquier ayuda sería apreciada.

Answer 1

Creo que puedes simplificar esto un poco:

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

Answer 2

Dale una oportunidad a este código, es algo que armé para la empresa para la que trabajo.

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

Answer 3

Esto debería querer lo que desee: marque el enlace correspondiente y, en su defecto, marque el que corresponda.

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();

Además, encontré un tutorial oficial sobre esto en el sitio de jQuery Docs : desplácese hasta la parte inferior para ver el código jQuery. Es más estricto que el mío, aunque no se adapta a tu situación.

Answer 4

gran lectura ... pero tengo que hacer una sugerencia ... incluso si el JS funciona a la perfección, deberías mantener todos los elementos de la lista del menú dentro de una lista desordenada (o lista ordenada), como una buena práctica ... :)