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.