December 28, 2024
1 min read
HTML Code
<ul class="tab_menu">
    <li data-cat="tab1" class="active">tab1</li>
    <li data-cat="tab2">tab2</li>
    <li data-cat="tab3">tab3</li>
</ul>
<div class="tab_content">
    <div class="tab_content_item tab1 active">
        Tab content 1
    </div>
    <div class="tab_content_item tab2">
        Tab content 2
    </div>
    <div class="tab_content_item tab3">
        Tab content 3
    </div>
</div>
CSS code
.tab_content_item {
    display: none;
}

.tab_content_item.active {
    display: block;
}

ul.tab_menu {
    list-style: none;
    text-align: center;
}

ul.tab_menu li {
    display: inline-block;
    padding: 5px 10px;
}

ul.tab_menu li.active {
    color: #11c540;
}
jQuery code
$('ul.tab_menu li').click(function (e) {
    e.preventDefault();
    let current_cat = $(this).data('cat');
    //menu active
    let tab_menu = $(this).siblings();
    $(tab_menu).not($(this)).removeClass('active');
    $(this).addClass('active');
    // content acive 
    let tab_content = $(this).parent().next().children();
    $(tab_content).not('.' + current_cat).removeClass('active');
    $('.' + current_cat).addClass('active');
});

Leave a Reply

Your email address will not be published. Required fields are marked *

Most View or Popular Post on WordPress

WordPress Post query by user views without plugin and simple code snippet

Jquery Replace specific text in all element

Scenario Imagine you have a set of elements with the class specific_class, and they all contain the phrase “old text.” You want to replace this phrase with “New text” programmatically. The Solution Here’s a simple jQuery script to achieve this: How It Works Things to Keep in Mind Extending the Script jQuery provides a quick […]

WooCommerce Custom Order Dropdown Based on Payment Method

WooCommerce admin order page custom drop-down base on payment method & show order admin column with code only

HTML img tag to HTML SVG tag [WordPress]

Image to SVG for WordPress. Generate svg code from image file

Web Development Project in mind?

if you looking for a web developer for paid contribution to your project I am available for work.

Mukto
Mukto

Click the button below to chat with me.