it-swarm.com.de

jQuery add Klasse .active im Menü

Ich habe ein Problem.

Ich möchte die Klasse "active" im Elementmenü hinzufügen, wenn die relative Seite aktiviert ist.

die Speisekarte ist sehr einfach:

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

In jQuery muss ich überprüfen, ob die URL www.xyz.com/other/link1/ ist.

wenn dies der Fall ist, möchte ich eine Klasse hinzufügen, das 'a'-Element von link1.

Ich versuche viele Lösungen, aber nichts funktioniert.

33
Andrea Turri

Hier klicken für eine Lösung in jsFiddle

Was Sie brauchen, ist, dass Sie window.location.pathname wie angegeben erhalten und dann regexp erstellen und mit den Navigationsreferenzen testen.

$(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');
            }
        });

});
72
Tom Tu

Ein einfacher Weg für mich war:

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

da meine Links auf absolute URL verweisen, aber wenn Ihre Links relativ sind, können Sie Folgendes verwenden:

 window.location**.pathname**

Holen Sie sich die LI-Elemente, durchlaufen Sie, überprüfen Sie die HREF:

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

Keine anderen "addClass" -Methoden funktionierten für mich beim Hinzufügen einer Klasse zu einem "a" -Element im Menü außer diesem:

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

Ich habe vier Stunden gebraucht, um es zu finden.

2
betty.88

Wasims Antwort ein paar Posts von hier aus funktioniert wie angekündigt:

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

2
Realto619

Schau dir das an thisWORKS

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");
    })
})
2
Wazy

window.location.href gibt Ihnen die aktuelle URL (wie in der Browseradresse angegeben). Nach dem Parsen und Abrufen des relevanten Teils würden Sie ihn mit jedem Link href vergleichen und die active-Klasse dem entsprechenden Link zuordnen.

1
Darin Dimitrov

Verwenden Sie window.location.pathname und vergleichen Sie es mit Ihren Links. Sie können so etwas tun:

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

Zunächst müssen Sie jedoch currentSiteVar vorbereiten, um es in selecor zu setzen.

1
Marek Tuchalski

Ich vermute, Sie versuchen, Asp-Code und JS-Code zu mischen, und die Bindungsaufrufe werden irgendwann nicht mehr richtig entschuldigt.

Vielleicht können Sie stattdessen einen Delegierten verwenden. Dadurch entfällt die Komplexität, wann das Klickereignis gebunden werden muss.

Ein Beispiel wäre:

$('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');
   }
});

Wenn dies hilfreich ist, wird das Attribut Attribute Starts With Selector von jQuery verwendet.

Chi

1
Chi Chan

Wenn Sie das aktive Menü einstellen, haben Sie viele Möglichkeiten, dies zu tun. Jetzt teile ich Ihnen eine Möglichkeit, ein aktives Menü durch CSS einzustellen.

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

Jetzt setzen Sie nur $_request["id"] == "home" thì echo "class='active'", dann können wir dasselbe mit anderen machen.

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

Ich denke, es ist bei dir nützlich.

0
Hueston Rido
$(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");
     })
});
0
mdubey
<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>
0
princespn

Das funktioniert für mich, im Grunde ist die Navigation gleich

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

Angenommen, Sie befinden sich unter der URL: http: // localhost/projektname/shop/detail_shop/

Und Sie möchten, dass der Link "SHOP" die Klasse "aktiv" erhält, sodass Sie visuell anzeigen können, dass die aktive Navigation aktiv ist, auch wenn Sie sich auf der Unterseite von "shop" in "detail_shop" befinden. 

Das 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 wird , Projektname, Geschäft, Detailgeschäft erhalten.
  2. document.location.protocol erhält http:
  3. document.location.hostname erhält localhost
  4. str [1] erhält Projektname
  5. str [2] wird shop erhalten

Im Wesentlichen wird dies mit den Links im nav übereinstimmen, dessen href-Attribut mit "shop" (oder was auch immer das sekundäre Verzeichnis ist) beginnt.

0
aidil

diese Arbeit für mich: 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;
0
ariechaezars