web-dev-qa-db-ja.com

jQueryはメニューの.activeクラスを追加します

問題があります。

相対ページがオンのときにアイテムメニューに「アクティブ」クラスを追加したい。

メニューは非常にシンプルです：

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

JQueryでは、URLがwww.xyz.com/other/link1/であるかどうかを確認する必要があります

これであれば、link1の「a」要素にクラス1を追加します。

私は多くのソリューションを試していますが、何も機能しません。

jquerymenu
33
Andrea Turri

ここをクリック jsFiddleのソリューション

必要なのは、前述のようにwindow.location.pathnameを取得し、それから正規表現を作成し、ナビゲーションhrefに対してテストする必要があることです。

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

私にとって簡単な方法は：

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

私のリンクは絶対URLに移動しますが、リンクが相対的な場合は、次を使用できます。

 window.location**.pathname**
18
Pierre Michel Silva Pèrez

LI要素を取得し、ループスルーし、HREFを確認します。

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

この1つを除き、メニューの「a」要素にクラスを追加するときに、他の「addClass」メソッドは機能しませんでした。

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

これを見つけるのに4時間かかりました。

2
betty.88

Wasimの答えは、ここからのいくつかの投稿が宣伝通りに機能する：

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

2
Realto619

チェックアウト this [〜＃〜] works [〜＃〜]

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は、現在のURLを提供します（ブラウザのアドレスに表示されます）。解析して関連する部分を取得した後、各リンクhrefと比較し、activeクラスを対応するリンクに割り当てます。

1
Darin Dimitrov

Window.location.pathnameを使用して、リンクと比較します。次のようなことができます：

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

ただし、最初にcurrentSiteVarを準備して選択する必要があります。

1
Marek Tuchalski

AspコードとJSコードを混在させようとしていると思いますが、ある時点でバインディングコールが正常に機能しないか、または正しくないのです。

代わりにデリゲートを使用してみてください。クリックイベントをバインドするタイミングの複雑さを排除します。

例は次のとおりです。

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

それが役立つかどうかを確認し、jQueryの 属性で始まる属性 を使用します。

チー

1
Chi Chan

アクティブなメニューを設定するために、多くの方法があります。次に、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>

ここでは、$_request["id"] == "home"thìecho "class='active'"、他の人と同じことができます。

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

役に立つと思います。

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

これは私のために働く、基本的にナビゲーションは同じです

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

あなたがURLにいるとしましょう： http：// localhost/project_name/shop/detail_shop /

また、「SHOP」liリンクでクラス「アクティブ」を取得して、「detail_shop」の「shop」のサブページにいる場合でも、アクティブなナビゲーションであることを視覚的に示すことができます。

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は、project_name、shop、detail_shopを取得します
  2. document.location.protocolはhttp：を取得します
  3. document.location.hostnameはlocalhostを取得します
  4. str [1]はproject_nameを取得します
  5. str [2]はshopを取得します

基本的に、href属性が「shop」で始まるnavのリンク（または、セカンダリディレクトリが何であれ）に一致します。

0
aidil

私のためのこの作品：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