Ask Your Question
3

How can you activate a tab by clicking on a relevant item from a list?

asked 2023-06-06 03:31:27 +0000

qstack gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2023-06-06 03:54:01 +0000

devzero gravatar image

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.

edit flag offensive delete link more

Your Answer

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

Add Answer


Question Tools

Stats

Asked: 2023-06-06 03:31:27 +0000

Seen: 14 times

Last updated: Jun 06 '23