CODEWITHSUNDEEP
javascriptjquerytabs
Alec Sanger
Alec Sanger

Reputation: 4562

jQuery click() still activates anchor, even though click function returns false

I've got a very basic jQuery tab setup. Everything worked fine, but I needed a hash in the URL to dictate the active tab, so I added a condition to check for the hash. Now when the page loads, it's actually activating the anchor and shifting the page down. Why isn't the "return false;" working?

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

**

Here are some updates:

**

If I simply enter the actual hash value instead of pull it from window.location.hash, it works perfectly.

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

Clicking the different tabs DOES NOT shift the page, only when the page loads and automatically clicks the tab based on the hash value.

If I place a conditional and then automatically click without using a a variable within the jquery selector, it works fine, assuming the location hash does not match the hash I'm clicking (strange, I know...)

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

This really doesn't make much sense to me. It seems that the only issue is using the window.location.hash within the jquery selector...

Upvotes: 2

Views: 2398

Answers (5)

Krishna Torque
Krishna Torque

Reputation: 645

Pure Javascript Solution to stop all hash default click

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); }

Upvotes: 0

Josh Stodola
Josh Stodola

Reputation: 82513

Instead of .click() use .triggerHandler("click")

Also, your click handler needs an e event parameter and you need to call e.preventDefault() instead of the old-school return false.

Lastly, instead of if(window.location.hash) use if(window.location.hash.length > 0)

Upvotes: 0

Sparky
Sparky

Reputation: 98748

Try preventDefault() instead. Don't forget the e inside .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
  }
});

And then chaining some things together...

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

I'm not sure what you're doing here...

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

The second line instantly adds two classes you removed with the first line.

Upvotes: 0

antonjs
antonjs

Reputation: 14318

Maybe also this code should make your work:

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

The other way is:

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

Upvotes: 1

C.S.
C.S.

Reputation: 422

Your approach is very recursive. Try to avoid running a collection across a collection.

Here are a few snippets from a jQuery 1.7+ implementation that might do what you need.

... initialization

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

... some function

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

Upvotes: 0

Related Questions