jQuery click () по-прежнему активирует привязку, даже если функция click возвращает false

Question

У меня есть базовая настройка вкладки jQuery. Все работало нормально, но мне требовался хеш в URL для указания активной вкладки, поэтому я добавил условие для проверки хеша. Теперь, когда страница загружается, она фактически активирует привязку и смещает страницу вниз. Почему не «вернуть ложь»; рабочий?

$(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, все работает нормально, если предположить, что хэш местоположения не соответствует хешу, который я нажимаю (странно, я знаю ...)

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

Это действительно не имеет особого смысла для меня. Кажется, что единственная проблема заключается в использовании window.location.hash в селекторе jquery ...

Answer 1

Может быть, этот код должен сделать вашу работу:

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

Другой способ:

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

Answer 2

Pure Javascript Solution для остановки всех хешей по умолчанию, нажмите

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

Ваш подход очень рекурсивный. Старайтесь не запускать коллекцию в коллекции.

Вот несколько фрагментов из реализации 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 4

Вместо .click() используйте .triggerHandler("click")

Кроме того, вашему обработчику кликов необходим параметр события e, и вам нужно вызвать e.preventDefault() вместо старой школы return false.

Наконец, вместо if(window.location.hash) используйте if(window.location.hash.length > 0)

Answer 5

Попробуйте 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");

Вторая строка мгновенно добавляет два класса, которые вы удалили с первой строкой.