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.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-06-06 03:31:27 +0000
Seen: 14 times
Last updated: Jun 06 '23
Is it feasible to utilize a Toggle Button to switch among multiple classes exceeding 2?
What is the process for generating a dynamic subdomain/URL using vue.js?
How can I create a transition on click using CSS without the need for JavaScript?
How can the style of the loader be modified while the form submission is being processed?
I'm attempting to develop a Javascript-based comments section for my website.
What are some feasible methods to enable MIDI file playback on a web browser?