jquery - ejemplo - Bootstrap CSS Active Navigation

li active css

Question

En el sitio web de Bootstrap, el subnav coincide con las secciones y cambia el color de fondo a medida que usted o 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. ¿Debo agregar jQuery adicional o me falta algo de CSS para que el activo cambie como el menú subnav en su sitio?

Answer 1

Uso 2 1 líneas, dependiendo de cómo esté estructurado mi navegador

Solo asegúrate de que ninguno de tus enlaces tenga una clase activa para comenzar.

enlaces reales

Si sus enlaces de navegación 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'');

hash links

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 hash-click, devuelva false:

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

Answer 2

Agregue a su JavaScript:

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

Answer 3

Esto es con 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 4

Esto se está haciendo bastante viejo y está lleno de respuestas, pero tomé la mejor respuesta y la hice mejor. La respuesta superior solo funciona si hay una en la página. Esto lo lleva a eliminar los elementos activos de los sibling y agregarlos al que hizo clic.

También agregué la clase nav-toggle para que no interfiera con cosas que ya tienen bootstrap js adjunto.

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

Answer 5

Hice algo diferente para resolver esto (fyi, soy un completo html / css / js amateur).

Cada uno de mis botones de la barra de navegación va a una nueva página. entonces, en el html de cada página, puse algo así 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 realmente ''cambiar''. Estoy seguro de que es posible, pero de nuevo, soy bastante nuevo en esto.

Answer 6

Intenté algunas de las principales respuestas anteriores, funciona para la clase ".active", pero los enlaces no funcionan bien, aún 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 agrega clase activa a li

Answer 7

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

Además, solo necesita eliminar la clase activa actual y agregar una nueva, no buscar todas las li''s. También quiere que el código no haga nada cuando el elemento de la lista que ha seleccionado ya está activo, no innecesariamente agregue y elimine la misma clase activa. Por último, debe poner su oyente de eventos en el elemento a, no en el li, ya que tiene más facilidad para activar un evento de clic en iPhones y tabletas, etc. También podría usar .delegate para no tener que esperar un evento listo para DOM. . Así que al final haría algo como esto (supongo que has precargado 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 8

Para cambiar la clase, necesita realizar algo de 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 9

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 10

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 como un encanto.

Answer 11

cualquiera que tenga problemas con esto usando jsp, mira tus paquetes.

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

pero mi href en mi barra de navegación se llama simplemente 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 12

este es mi código para manejar la lista de navegación de arranque de twitter:

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

Answer 13

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