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)