jquery - mostrar - class active bootstrap

jQuery agrega clase.active en el menú

Question

Tengo un problema.

Quiero agregar la clase "activa" en el menú de elementos cuando la página relativa está activada.

el menú es muy simple:

<div class="menu">

<ul>
<li><a href="~/link1/">LINK 1</a>
<li><a href="~/link2/">LINK 2</a>
<li><a href="~/link3/">LINK 3</a>
</ul>

</div>

En jQuery necesito verificar si la URL es www.xyz.com/other/link1/

si es este me gustaría agregar una clase uno el elemento ''a'' de link1.

Estoy probando muchas soluciones pero nada funciona.

Answer 1

Configurando el menú activo, tienen muchas formas de hacerlo. Ahora, les comparto una forma de configurar el menú activo por CSS.

    <a href="index.php?id=home">Home</a>
    <a href="index.php?id=news">News</a>
    <a href="index.php?id=about">About</a>

Ahora, solo configura $_request["id"] == "home" thì echo "class=''active''" , entonces podemos hacer lo mismo con los demás.

<a href="index.php?id=home" <?php if($_REQUEST["id"]=="home"){echo "class=''active''";}?>>Home</a>
<a href="index.php?id=news" <?php if($_REQUEST["id"]=="news"){echo "class=''active''";}?>>News</a>
<a href="index.php?id=about" <?php if($_REQUEST["id"]=="about"){echo "class=''active''";}?>>About</a>

Creo que es útil contigo

Answer 2

Esto funciona para mí, básicamente la navegación es la misma

<div id="main-menu">
  <ul>
    <li><a href="<?php echo base_url();?>shop">SHOP</a>
    <li><a href="<?php echo base_url();?>events">EVENTS</a>
    <li><a href="<?php echo base_url();?>services">SERVICES</a>
  </ul>
</div>

Digamos que estás en la URL: http://localhost/project_name/shop/detail_shop/

Y desea que el enlace "SHOP" li haga que la clase "active" para que pueda indicar visualmente que es la navegación activa, incluso si se encuentra en la página secundaria de "shop" en "detail_shop".

El javascript:

var path = window.location.pathname;
var str = path.split("/");
var url = document.location.protocol + "//" + document.location.hostname + "/" + str[1] + "/" + str[2];

$(''#main-menu a[href="'' + url + ''"]'').parent(''li'').addClass(''active'');

1. str conseguirá , project_name, shop, detail_shop
2. document.location.protocol obtendrá http:
3. document.location.hostname obtendrá localhost
4. str [1] obtendrá project_name
5. str [2] se comprará

Básicamente, coincidirá con los enlaces en el navegador cuyo atributo href comienza con "comprar" (o lo que sea que el directorio secundario sea).

Answer 3

La respuesta de Wasim a algunas publicaciones desde aquí funciona como se anuncia:

http://jsfiddle.net/Realto619/jKf3F/1/

Answer 4

Ningún otro método de "addClass" me funcionó cuando agregué una clase a un elemento ''a'' en el menú, excepto este:

$(function () {
        var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(///$/, '''') + "$");  
        $(''a'').each(function () {
                            if (urlRegExp.test(this.href.replace(///$/, ''''))) {
                $(this).addClass(''active'');
            }
        });
    });

Esto me llevó cuatro horas encontrarlo.

Answer 5

Obtenga los elementos de LI, revise el HREF:

$(''.menu'').find(''a'').each(function() {
    if($(this).attr(''href'').indexOf(''www.xyz.com/other/link1/'')>0) {
          $(this).addClass(''active'');
    }
})

Answer 6

Supongo que estás tratando de mezclar el código Asp y el código JS y en algún momento se está rompiendo o no está excusando las llamadas vinculantes correctamente.

Tal vez puedas intentar usar un delegado en su lugar. Cortará la complejidad de cuándo vincular el evento click.

Un ejemplo sería:

$(''body'').delegate(''.menu li'',''click'',function(){
   var $li = $(this);

   var shouldAddClass = $li.find(''a[href^="www.xyz.com/link1"]'').length != 0;

   if(shouldAddClass){
       $li.addClass(''active'');
   }
});

Vea si eso ayuda, utiliza el Atributo Inicia con Selector de jQuery.

Chi

Answer 7

Una forma más fácil para mí fue:

var activeurl = window.location;
$(''a[href="''+activeurl+''"]'').parent(''li'').addClass(''active'');

porque mis enlaces van a la URL absoluta, pero si tus enlaces son relativos, puedes usar:

 window.location**.pathname**

Answer 8

Use window.location.pathname y compárelo con sus enlaces. Puedes hacer algo como esto:

$(''a[href="~/'' + currentSiteVar + ''/"'').addClass(''active'');

Pero primero debes preparar currentSiteVar para ponerlo en el selecor.

Answer 9

este trabajo para mí: D

    function setActive() {
      aObj = document.getElementById(''menu'').getElementsByTagName(''a'');
      for(i=0;i<aObj.length;i++) {
        if(document.location.href.indexOf(aObj[i].href)>=0) {
          var activeurl = window.location;
          $(''a[href="''+activeurl+''"]'').parent(''li'').addClass(''active'');
        }
      }
    }

    window.onload = setActive;

Answer 10

Haga clic aquí para encontrar una solución en jsFiddle

Lo que necesitas es que necesites window.location.pathname como se mencionó y luego crear regexp y probarlo contra hrefs de navegación.

$(function(){

    var url = window.location.pathname, 
        urlRegExp = new RegExp(url.replace(///$/,'''') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn''t present there
        // now grab every link from the navigation
        $(''.menu a'').each(function(){
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(///$/,''''))){
                $(this).addClass(''active'');
            }
        });

});

Answer 11

window.location.href le dará la url actual (como se muestra en la dirección del navegador). Después de analizarlo y recuperar la parte relevante, lo compararía con cada enlace href y asignaría la clase active al enlace correspondiente.

Answer 12

Mira esto OBRAS

Html

<div class="menu">

    <ul>
        <li><a href="~/link1/">LINK 1</a>
        <li><a href="www.xyz.com/other/link1">LINK 2</a>
        <li><a href="~/link3/">LINK 3</a>
    </ul>

</div>

Jquery

$(document).ready(function(){
    $(".menu ul li a").each(function(){
        if($(this).attr("href")=="www.xyz.com/other/link1")
            $(this).addClass("active");
    })
})

Answer 13

$(function() {
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     $(".nav li").each(function(){
          if($(''a'',this).attr("href") == pgurl || $(''a'', this).attr("href") == '''' )
          $(this).addClass("active");
     })
});

Answer 14

<script type="text/javascript">
    jQuery(document).ready(function($) {
    var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(///$/,'''') + "$"); 
    $("#navbar li a").each(function() {//alert(''dsfgsdgfd'');
    if(urlRegExp.test(this.href.replace(///$/,''''))){
    $(this).addClass("active");}
});
}); 
</script>