Bootstrap CSS Active Navigation

Question

En el sitio web de Bootstrap, el SubNAV coincide con las secciones y cambia el color de fondo a medida que usted o se desplaza a la sección. Quería crear mi propio menú sin todos los colores de fondo y todo, sin embargo, cambié mi CSS para que fuera similar, pero cuando me desplazo hacia abajo o hago clic en el elemento del menú, la clase Activa no cambia. No estoy seguro de lo que estoy haciendo mal.

HTML:

<ul class="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS:

.menu {list-style:none;}
.menu > li {float: left;}
.menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;}
.menu > li > a:hover {color: #F95700;}
.menu .active > a, .menu .active > a:hover {color:#F95700;}

Revisé los archivos; jQuery, bootstrap.js y bootstrap.css están todos vinculados correctamente. ¿Tengo que agregar algunos jQuery adicionales o me falta algunos CSS para que el activo cambie como el menú Subnav en su sitio?

Answer 1

Para cambiar la clase, debe realizar un JavaScript.

En jQuery:

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

En JavaScript:

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

Espero que esto ayude.

Answer 2

Esto es lo que terminé ya que también tienes que limpiar a los demás.

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

Answer 3

Este es mi código para manejar la lista de navegación de bootstrap de Twitter:

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });

Answer 4

Yo uso 2 líneas de 1, dependiendo de cómo esté estructurado mi NAV

Solo asegúrese de que ninguno de sus enlaces tenga una clase activa para comenzar.

enlaces reales

Si sus enlaces de NAV están en archivos HTML separados (como una plantilla de diseño en Express.js que tiene un menú), puede hacer esto:

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

enlaces hash

Si son hashes, haz esto:

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

Si no desea desplazarse por el hash, haga clic en Falso:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });

Answer 5

Mirando algunas de las otras respuestas, si desea que la página web se desplace hacia abajo a esa sección cuando se hace clic en un menú lateral, entonces no desea preventDefault.

Además, solo necesita eliminar la clase activa actual y agregar una nueva que no se busque en todos los LI. También desea que el código no haga nada cuando el elemento de la lista que ha seleccionado ya está activo, no agregar y eliminar innecesariamente la misma clase activa. Por último, debe poner su oyente de eventos en el elemento A, no en el LI, ya que tiene un momento más fácil de activar un evento de clic en iPhones y tabletas, etc. También podría usar .delegate Así que no tiene que esperar un evento listo para DOM. Así que al final haría algo como esto (supongo que has precargado a jQuery):

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});

Answer 6

Sugiero este código:

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

Es trabajo como un encanto.

Answer 7

Hice algo diferente para resolver esto (para su información, soy un amateur HTML/CSS/JS completo).

Cada uno de mis botones de Navbar va a una nueva página. Entonces, en el HTML de cada página, pongo algo como esto en la parte inferior:

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

Eso lo hizo funcionar de inmediato para mí.

PD: Intenté la respuesta aceptada, pero no tuve suerte, ya que también necesitaría eliminar la clase 'activa' del botón actualmente activo para 'cambiar' realmente. Estoy seguro de que es posible, pero de nuevo, soy bastante nuevo en estas cosas.

Answer 8

Probado y funciona bien.

    $('.navbar li').click(function(e) {
        $('.navbar li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>

Answer 9

Cualquiera que tenga problemas con esto usando JSP, observe sus paquetes.

document.location.pathname me dio: /packagename/index.jsp

Pero mi href en mi barra de navegación llamó solo index.jsp

Entonces, para editar la respuesta de Konsumer:

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );

Answer 10

Probé algunas de las respuestas principales anteriores, funciona para la clase ". Activa", pero los enlaces no funcionan bien, todavía permanece en la página actual. Entonces probé esto:

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

Lo encontré aquí: Twitter Bootstrap Agregar clase activa a Li

Answer 11

<ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>

Answer 12

Agregue a su JavaScript:

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});

Answer 13

Esto se está volviendo bastante viejo y agrupado con respuestas, pero tomé la respuesta superior y la hice mejor. La respuesta superior solo funciona si hay una en la página. Esto lo alcanza para eliminar activo de sibling elementos y agregarlo al que hizo clic.

También agregué la clase nav-toggle para que no interfiera con cosas que ya tienen Bootstrap JS adjunta.

$('.nav.nav-toggle li').click(function(e) {
  var $this = $(this);
  $this.siblings().removeClass('active');
  if (!$this.hasClass('active')) {
      $this.addClass('active');
  }
  e.preventDefault();
});