JSFiddle - React, Tailwind, and code Playground

by sris

HTML

<div id="mws-navigation">
                <ul id="link">
                    <li class="" data-related="a" id="a1"><a href="#a"><i class="icon-book"></i>A</a></li>
                    <li data-related="b" class="" id="b1"><a href="#b"><i class="icon-search"></i>B</a></li>
                  <li data-related="c" class="" id="c1"><a href="#c"><i class="icon-calendar"></i>C</a></li>    
                </ul>
            </div>         
        <!-- Main Container Start -->
        <div id="mws-container" class="clearfix">
        	<!-- Inner Container Start -->
                <div id="a" class="tab">
                    aaaa
                </div>
                <div id="b" class="tab"> 
                    bbbb
                </div>
                <div id="c" class="tab"> 
                   cccc
                </div>
        </div>
<a href="#c">vvv</a>// this link will be in other page(to reach C)

JavaScript

$(function()
    {
    	
    	    $('#link li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#a').show();
            document.getElementById('a1').className='active';
    	    $('#link li').click(function(e){
            $('#link li').removeClass('actif');
            $(this).find('li').addClass('actif');
            $('.tab').hide();
            $('#'+$(this).attr('data-related')).show();
            e.preventDefault();
});
    });