JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<ul class='headers'>
    <li><a href='#header1'>→ header 1</a></li>
    <li><a href='#header2'>→ header 2</a></li>
    <li><a href='#header3'>→ header 3</a></li>
</ul>
<div id='header1'>
    Hi, this is header1.<hr>
</div>
<div id='header2'>
    This is the header2.<hr>
    <ul class='tabs'>
        <li><a href='#tab1'>header2 → tab1</a></li>
        <li><a href='#tab2'>header2 → tab2</a></li>
        <li><a href='#tab3'>header2 → tab3</a></li>
    </ul>
    <div id='tab1'>
        This is tab1.<hr>
    </div>
    <div id='tab2'>
        This is tab2.<hr>
    </div>
    <div id='tab3'>
        This is tab3.<hr>
        <ul class='ps'>
            <li><a href='#p1'>header2 → tab2 → p1</a></li>
            <li><a href='#p2'>header2 → tab2 → p2</a></li>
        </ul>
        <div id='p1'>
            This is p1.<hr>
        </div>
        <div id='p2'>
            This is p2.<hr>
        </div>
    </div>
</div>
<div id='header3'>
    And this is header3.<hr>
</div>

<div class="helpers">
    <p id="header2-tab3-p2"></p>
    
    <a href="#header2"></a>
    <a href="#tab3"></a>
    <a href="#p2"></a>
</div>

CSS

ul {
    margin: 20px 0 10px;
}
ul li {
    display: inline;
    margin-right: 10px;
    padding: 0 4px;
    
}
div {
    color: purple;
    font-size: 0.9em;
    margin-left: 10px;
}
strong {
    font-weight: bold;
}
.active {
    background: #999;
}
.active * {
    color: #000;
    text-decoration: none;
}
.helpers {
    display: none:
}

JavaScript

$.fn.myTabsURL = function() {

    return this.each(function() {
        
        var $activeR, $linksR = $(this).find('p');
        
        $activeR = $($linksR.filter('[id="'+location.hash+'"]')[0] || $linksR[0]);
        
        hrefs = $activeR.attr('id').split('-');
                  
        $(hrefs).each(function(){
            $('a[href="#' + $(this) + '"]').trigger('click');
        });
        
        alert(hrefs);
        
    });

};
        
$('.helpers').myTabsURL();



$.fn.myTabs = function() {

    return this.each(function() {
        
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $links.first();
        $active.parent('li').addClass('active');
        $content = $($active.attr('href'));
        

        // Hide the remaining content
        $links.not($active).each(function () {
                $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function(e){
                // Make the old tab inactive.
                $active.parent('li').removeClass('active');
                $content.hide();
        

                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.parent('li').addClass('active');
                $content.show();
        

                // Prevent the anchor's default click action
                e.preventDefault();
        });
    });

};


$('.headers, .tabs, .ps').myTabs();