jQuery - check URL for anchor

Question

I made a really simple tab interface using jQuery based on jQuery minitabs:

$(".tabs .nav").delegate("a", "click", function(){
  var tabs = $(this).closest(".tabs");
  var target = $(this).attr("href").split('#')[1];

  $(".nav a", tabs).removeClass("active");
  $(this).addClass("active");

  $("input.active-tab", tabs).val(target);

  //hide the tabs that doesn't match the ID
  $('.tab:not(.'+target+')', tabs).hide();
  $('.tab.'+target, tabs).show();

  return false;
});

the markup looks like:

  <div class="tabs">

    <input type="hidden" class="active-tab" name="active-tab" value="tab1" />

    <ul class="nav">
      <li><a href="#tab1" class="active">tab1</a></li>
      <li><a href="#tab2">tab2</a></li>
      <li><a href="#tab3">tab3</a></li>
    </ul>

    <div class="tab tab1">
    ....
    </div>

    <div class="tab tab2">
    ....
    </div>

    <div class="tab tab3">
    ....
    </div>
  </div>

It works fine, but I want to make so the active tab can be set based on the current URL.

for eg. if I paste this URL: http://site.com/page.php#tab2, I want the tab2 to appear as active

How can I do that?

Galen · Accepted Answer · 2011-03-19 23:11:22Z

1

that is located in window.location.hash

you can search $(".tabs .nav") for a link that has the same hash and trigger a click on it

answered Mar 19, 2011 at 23:11

Galen

30.2k9 gold badges75 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

I did it with if(window.location.hash == $(this).attr('href')) $(this).trigger('click'); thanks :D

Collectives™ on Stack Overflow

jQuery - check URL for anchor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related