添加類主動點擊使用jQuery

菜單鏈接時，我有HTML添加類主動點擊使用jQuery

<div id="top" class="shadow"> 
    <ul class="gprc"> 
    <li><a href="http://www.domain.com/">Home</a></li> 
    <li><a href="http://www.domain.com/link1/">Text1</a></li> 
    <li><a href="http://www.domain.com/link2/">Text2</a></li> 
    <li><a href="http://www.domain.com/link3/">Text3</a></li> 
    <li><a href="http://www.domain.com/link4">Text4</a></li> 
    </ul> 
</div>

和jQuery

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

的問題是，當我的首頁鏈接上單擊所有選項卡趨於活躍類不明白爲什麼。我需要它的第一個鏈接沒有得到任何活躍的類。

來源

2013-10-28 Adrian

爲什麼使用'each（）'循環？這可以通過'click（）' –

我也在尋找這個解決方案，我測試你的代碼，它是。在第一種方法中，所有鏈接都突出顯示，並且當我點擊其他鏈接時它正在正常工作。問題出在主頁上bcoz所有的鏈接都被突出顯示，因爲當頁面加載時沒有收到任何事件，如果您發送命令或單擊每個鏈接，代碼將起作用。理論上。爲了制止這種行爲，我發現這個代碼上面的答案之一，添加以下代碼並修改「.sibling（）」到「.previousSibling（）」

$(this).parent().sibling().find('a').removeClass('active');

「.sibling（）」將在突出你的鏈接結束更改爲「.previousSibling（）」，所以它會去第一（李）

$(this).parent().previoussibling().find('a').removeClass('active');

您的代碼將是這樣的：

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

來源

2015-05-09 16:33:12

閱讀此答案我假設英語不是您的第一語言？請你重新閱讀這個答案，並將其分解成段落和句子，以便更容易理解。順便說一句，「bcoz」應該是「因爲」。至於你的稱呼，「*感謝和上帝保佑*」 - 請刪除它，這與你的答案無關（正如「你好」，簽名等等）。雖然我尊重你的意圖，但這裏不合適。我正在編輯自己，嘗試和改進，但我努力解決你想說的話。 –

您正在#top div內的所有<a>標籤上運行foreach循環。所以當然它會將類active添加到它們中。

我認爲你正在試圖做的是這樣的：http://jsfiddle.net/rLddf/4/

我用click事件來代替。

編輯切換鏈接到Kristof Feys示例 - 更高效。

來源

2013-10-28 15:54:37

輕鬆實現，我需要它只激活我單擊的選項卡，而不是單擊每個鏈接以獲取顏色後。 – Adrian

@Adrian，修正：http://jsfiddle.net/rLddf/2/ –

這是所有需要，但：http://jsfiddle.net/rLddf/4/ –

檢查這一點，這將只激活點擊選項卡，去掉會對所有，然後添加了一個點擊

$("#top a").click(function() { 
    $('a').removeClass('active'); 
    $(this).addClass("active"); 
});

Check this

來源

2013-10-28 15:58:16

不知道爲什麼它什麼都不做。 – Adrian

你檢查了小提琴鏈接，http://jsfiddle.net/rLddf/6/ –

我加入href =「1」http://jsfiddle.net/rLddf/9/。如果你點擊它，你會看到在頁面加載標籤上不會保持活動狀態。 – Adrian

我想你需要的東西是這樣的：

$(function() { 
    $("#top a").click(function(e){ 
     e.preventDefault(); 
     $(this).addClass('active'); 
     $(this).parent().siblings().find('a').removeClass('active'); 
    }); 
});

Fiddle Demo

來源

2013-10-28 16:00:42

這項工作，但不通過鏈接。我的意思是，當我點擊它時，它只會保持被選中的鏈接點擊，但不會訪問鏈接。 – Adrian

要通過鏈接，只需刪除行「e.preventDefault（）;」 –

@KristofFeys現在通過鏈接，但它不會保持選擇。 – Adrian

您可以試試出去了。它會幫助你：

<script type="text/javascript"> 
    $(function() { 
     $('#sidebar li a').each(function() { 
      var path = window.location.pathname; 
      if (path.indexOf('?') > 0) { 
       var current = path.indexOf('?'); 
      } 
      else { 
       var current = path; 
      } 
      var url = $(this).attr('href'); 
      var currenturl = url.substring(url.lastIndexOf('.') + 1); 
      if (currenturl.toLowerCase() == current.toLowerCase()) { 
       $(this).addClass('active'); 
       var par = $(this).parent(); 
       par.addClass('open'); 
      } 
     }); 
    }); 
</script>

來源

2015-01-08 06:52:03

通常情況下，如果答案包含解釋代碼意圖做什麼的解釋，以及爲什麼解決問題而不介紹其他問題，答案會更有幫助。 –

試試這個...

$(function() { 
    $('#yourMenu a').each(function(){ 
     $current = location.href; 
     $target= $(this).attr('href'); 
      if ($target== $current) 
      { 
       $(this).addClass('active'); 
      } 
    }); 
});

來源

2016-12-09 00:32:32 user7270348

添加類主動點擊使用jQuery

回答

相關問題