Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

You can activate a tab by clicking on a relevant item from a list using JavaScript or jQuery. Here is an example:

HTML:

<ul>
  <li><a href="#" data-tab="tab1">Tab 1</a></li>
  <li><a href="#" data-tab="tab2">Tab 2</a></li>
  <li><a href="#" data-tab="tab3">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div id="tab1">Tab 1 content</div>
  <div id="tab2">Tab 2 content</div>
  <div id="tab3">Tab 3 content</div>
</div>

JavaScript/jQuery:

$(document).ready(function() {
  $('ul li a').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('.tab-content div').removeClass('active');
    $('#' + tab_id).addClass('active');
  });
});

In this example, each list item has an anchor tag with a data attribute that corresponds to the ID of the tab content. When the anchor tag is clicked, the JavaScript/jQuery code gets the ID of the corresponding tab content and adds the "active" class to it. The CSS for the "active" class would include display: block; to show the tab content.