jQuery click（）仍激活錨點，即使click函數返回false

Question

我有一個非常基本的jQuery標簽設置。 一切工作正常，但是我需要在URL中使用散列來指定活動選項卡，因此我添加了一個條件來檢查散列。 現在，當頁面加載時，它實際上是在激活錨點並向下移動頁面。 為什么不返回“ false”？ 工作？

$(document).ready( function() {
  $(".tabs a").click(function() {
    $(".tabs a").removeClass("active");
    $(".tabs a").addClass("button secondary");
    $(this).attr("class","button active");
    var href = $(this).attr("href");
    $(href).parent().find("> .active").removeClass("active");
    $(href).addClass("active");
    return false;
  });
  if(window.location.hash) {
    $(".tabs a[href$='"+window.location.hash+"']").click();
  } else {
    $(".tabs a:eq(0)").click(); //default to first tab
  }
});

**

以下是一些更新：

**

如果我只是輸入實際的哈希值，而不是將其從window.location.hash中提取出來，那么它會完美地工作。

$(".tabs a[href$='#Contact2']").click();

單擊不同的選項卡僅在頁面加載並基於哈希值自動單擊選項卡時才移動頁面。

如果我放置條件，然后在不使用jquery選擇器內使用aa變量的情況下自動單擊，則假定位置哈希與我單擊的哈希不匹配（奇怪，我知道...），它可以正常工作

if(window.location.hash === "#Contact2") {
  $(".tabs a[href$='#Contact4']").triggerHandler("click");
} else {
  $(".tabs a:eq(0)").click(); //default to first tab
}

這對我來說真的沒有多大意義。 似乎唯一的問題是在jquery選擇器中使用window.location.hash ...

Answer 1

也許這段代碼也可以使您的工作：

 $(".tabs a").click(function(){
            // your code 
            return false;
 });

另一種方法是：

$(".tabs a").click(function(e) {
    e.preventDefault();
    // your code
});

Answer 2

純Javascript解決方案可停止所有哈希默認值單擊

var a_tag = document.getElementsByTagName('a'); for (var i = 0; i < a_tag.length; i++) { a_tag[i].addEventListener('click', function (e) { var lastChar = this.href.substr(this.href.length - 1); if (lastChar == "#") { e.preventDefault(); } }, false); }

Answer 3

請嘗試preventDefault() 。 不要忘了e內.click(function(e)

$(document).ready( function() {
  $(".tabs a").each(function() {
    $(this).click(function(e) {
      e.preventDefault();
      $(".tabs a").removeClass("button secondary active");
      $(".tabs a").addClass("button secondary");
      $(this).attr("class","button active");
      var href = $(this).attr("href");
      $(href).parent().find("> .active").removeClass("active");
      $(href).addClass("active");
    });
  });
  if(window.location.hash) {
    $(".tabs a[href$='"+window.location.hash+"']").click();
  } else {
    $(".tabs a:eq(0)").click(); //default to first tab
  }
});

然后將一些東西鏈接在一起...

$(document).ready( function() {
  $(".tabs a").each(function() {
     $(this).click(function(e) {
      e.preventDefault();
      $(".tabs a").removeClass("button secondary active").addClass("button secondary");
      $(this).attr("class","button active");
      var href = $(this).attr("href");
      $(href).parent().find("> .active").removeClass("active")
      $(href).addClass("active");
    });
  });
  if(window.location.hash) {
    $(".tabs a[href$='"+window.location.hash+"']").click();
  } else {
    $(".tabs a:eq(0)").click(); //default to first tab
  }
});

我不確定您在這里做什么...

      $(".tabs a").removeClass("button secondary active")
      $(".tabs a").addClass("button secondary");

第二行立即添加您在第一行中刪除的兩個類。

Answer 4

您的方法非常遞歸。 嘗試避免在一個集合中運行一個集合。

以下是jQuery 1.7+實現中的一些代碼片段，它們可能會滿足您的需求。

...初始化

$(body).on("click", ".tabs a", { }, _selectTab);

...一些功能

_selectTab : function(event) {
    $(".tabs a").removeClass(selected); // clear all matches.
    $(event.currentTarget).addClass(selected); // something like that.
}

Answer 5

代替.triggerHandler("click") .click()使用.triggerHandler("click")

另外，您的點擊處理程序需要一個e事件參數，並且需要調用e.preventDefault()而不是老式的return false 。

最后，使用if(window.location.hash.length > 0)代替if(window.location.hash) if(window.location.hash.length > 0)