Change class according to URL on tabs jQuery

Question

HTML structure of Tabs:

<div class="txtabs-content">
<div id="tabs-e-0" class="txtabs-pane active in fade-slide"></div>
<div id="tabs-e-1" class="txtabs-pane fade-slide"></div>
<div id="tabs-e-2" class="txtabs-pane fade-slide"></div>
</div>

On page land, the first tab will open. When i set the URL to http://link#tabs-e-1, then the second tab will open.

Is there any way to achieve this using jQuery, to remove the active class on the first one and add it to the second one?

@BhojendraNepal, yes, I did read about Hash, but I could not find a way to connect the div ID with the class, and remove the remaining — tanya, Jun 23 '15 at 11:25
I did not downvoted but when you asking the question please include your effort alsoin the question , then it is easy to correct your mistakes and you can use the corrected code , otherwise may you got down votes — Arunprasanth K V, Jun 23 '15 at 11:28

score 1 · Accepted Answer · answered Jun 23 '15 at 11:27

You can select element id from url with window.location.hash and then add class to that element

$( document ).ready(function() {
      $('.txtabs-pane').removeClass('active in');
      var hash = window.location.hash;
      $(hash).addClass('active in');
    });

score 1 · Answer 2 · answered Jun 23 '15 at 11:51

1

$( document ).ready(function() {
  $('.txtabs-pane').removeClass('active in');
  var hash = window.location.hash;
  $(hash).addClass('active in');
});

answered Jun 23 '15 at 11:51

ruder partap

83
5

score 0 · Answer 3 · edited May 23 '17 at 10:26

0

You can try the below code (from this SO Q/A):

$("#tabs").tabs({
     select: function(event, ui) {                   
          window.location.hash = ui.tab.hash;
     }
});

edited May 23 '17 at 10:26

Community

1
1

answered Jun 23 '15 at 11:26

NightOwlPrgmr

1,322
3
21
31

Also, check out this other possible [duplicate](http://stackoverflow.com/questions/17961644/jquery-ui-tabs-change-tab-url-jquery-1-10). – NightOwlPrgmr Jun 23 '15 at 11:28

Change class according to URL on tabs jQuery

3 Answers3