Change jQuery tab with link/button

JavaScript
1

I’ve attached a simple HTML file with CSS and JS files for jQuery tabs. If you look on the first tab there is a link that I want to be able to click and have it change to the second tab. Any advice?

tab-test.zip (58.7 KB)

2

You have a number of unclosed <p> elements. You should probably make sure your html is valid first, then figure out how to get the link to behave the way you want.

1 Like
3

I don’t see any jQuery in your code…? Apparently you’re using bootstrap though, and directly modifying its classes (such as active in this case) may have undesired side effects. So I suppose your safest bet would be to .trigger() a click event on the second tab when that link gets clicked, so as not to interfere with bootstrap’s internal workings.

1 Like
4

Maybe something like this?

<ul class="nav nav-tabs">
  <li class="active"><a href="#A" data-toggle="tab">Tab 1</a></li>
  <li><a href="#B" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tabbable">
  <div class="tab-content">
    <div class="tab-pane active" id="A">
      <p>Tab 1</p>
      <p> <a href="#B" class="tab-link">Link to tab 2</a> </p>
    </div>
    <div class="tab-pane" id="B">
      <p>Tab 2</p>
       <p> <a href="#A" class="tab-link">Link to tab 1</a> </p>
    </div>
  </div>
</div>
<script>
$( ".tabbable" ).on( "click", ".tab-link", function() {
  $('.nav-tabs li a[href="' + $(this).attr('href') + '"]').trigger('click');
});
</script>
2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.