Twitter bootstrap + asp.net masterpages, ¿cómo configurar el elemento de la barra de navegación como activo cuando el usuario lo selecciona?

Question

Estamos en sí misma situación que pregunta Make Twitter Bootstrap navbar link active, pero en nuestro caso estamos utilizando ASP.net y MasterPages ...

Lo está la barra de navegación se define en la masterpage y cuando hace clic en un elemento de menú se le redirige a la página secundaria correspondiente, entonces, ¿cómo haría para cambiar el elemento activo de la barra de navegación consecuentemente sin replicar la lógica en cada página secundaria? (Preferiblemente sin variables de sesión y Javascript única en la página principal)

Answer 1

Hemos resuelto con la siguiente función en la página maestra:

<script type="text/javascript"> 
     $(document).ready(function() { 
      var url = window.location.pathname; 
      var substr = url.split('/'); 
      var urlaspx = substr[substr.length-1]; 
      $('.nav').find('.active').removeClass('active'); 
      $('.nav li a').each(function() { 
       if (this.href.indexOf(urlaspx) >= 0) { 
        $(this).parent().addClass('active'); 
       } 
      }); 
     }); 
    </script> 

Answer 2

Esto es lo que he utilizado en la maquinilla de afeitar:

<li class="@(Model.PageName == "DataEntryForms" ? "active" : "")"> 
    <a href="DataEntryForms">  
    Data Entry Forms 
    </a> 
</li> 
<li class="@(Model.PageName == "UserAdmin" ? "active" : "")"> 
    <a href="UserAdmin">  
    User Administration 
    </a> 
</li> 

Simplemente defina el nombre de la página como propiedad en el modelo, luego complete la prueba para cada li que tenga.

Answer 3

Suponiendo que la clase activa se establece correctamente por ASP.net, recomendaría una solución más fácil:

// Add the class to the parent li element of the active a element: 
$('#NavigationMenu ul li a.active').parent().addClass('active'); 

// Remove the active class from the a element: 
$('#NavigationMenu ul li a.active').removeClass('active'); 

El uso de ASP.net enrutamiento, esta solución funciona sin problemas en mi proyecto actual.

Y si desea manipular el elemento activo del menú, le recomiendo utilizar el MenuItemDataBound del control de menú en el código detrás. Pero en mi caso, esto no fue necesario.

Answer 4

<script type="text/javascript"> 
    $(document).ready(function() { 
     var url = window.location; 
     $('ul.nav li a').each(function() { 
      if (this.href == url) { 
       $("ul.nav li").each(function() { 
        if ($(this).hasClass("active")) { 
         $(this).removeClass("active"); 
        } 
       }); 
       $(this).parent().parent().parent().addClass('active'); 
       $(this).parent().addClass('active');      
      } 
     }); 
    }); 
</script> 

Answer 5

solución por "kinage sujit" funcionado mejor para mí, sin embargo, tenía que cambiar una línea:

var url = window.location.origin + window.location.pathname;