JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<ul id="tabmenu">
        <li><a data-href="#tab1">Tab1</a></li>
        <li><a data-href="#tab2">Tab2</a></li>
        <li><a data-href="#tab3">Tab3</a></li>
        <li><a data-href="#tab4">Tab4</a></li>
    </ul>
    <div class="panel" id="tab1">
        1
    </div>
    <div class="panel" id="tab2">
        2
    </div>
    <div class="panel" id="tab3">
        3
    </div>
    <div class="panel" id="tab4">
        4
    </div>

CSS

html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        ul
        {
            height: 40px;
        }
        li
        {
            float: left;
            padding: 5px;
            background-color: #ccc;
            color: #333;
            margin-left: 10px;
            list-style: none;
        }
        .panel
        {
            height: 100px;
            width: 800px;
            margin: 0 auto 10px;
            background-color: #ccc; /*display: none;*/
        }
        .show
        {
            display: block;
        }
        
        .panel
        {
            display: block;
        }
         #tabmenu li
        {
            background: #dddddd;
        }
        #tabmenu li.activeitem
        {
            background: yellow;
        }
        .activepanel
        {
            background: red;
        }

JavaScript

$(document).ready(function ($) {
            var firstitem = $("#tabmenu li").first();
            firstitem.addClass("activeitem");
            showSelectedItem(firstitem.find("a").attr("data-href"));
            $('#tabmenu li').click(function () {
                $(this).addClass("activeitem");
                $('#tabmenu li').not(this).removeClass("activeitem")
                showSelectedItem($(this).find("a").attr("data-href"));
                //  $('').addClass('show')
            })
        });

        function showSelectedItem(selector) {
            $(selector).addClass("activepanel").fadeIn("slow");
            $(".panel").not(selector).removeClass("activepanel").hide();
        }