JSFiddle - React, Tailwind, and code Playground

by Adrian Carriger

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    
<div id="header">
        <ul id="menu">
            <li><a href="index.html">Home</a></li>
            <li>
                <a href="#" class="current">test page</a>
                <ul>
                    <li><a href="test.html" class="current">Overview</a></li>
                    <li><a href="#tab1">tab 1</a></li>
                    <li><a href="#tab2">tab 2</a></li>
                    <li><a href="#tab3">tab 3</a></li>
                </ul>
            </li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

    <div class="content">
        <section class="multilevel">
            <!-----tabs----->    
            <div class="tabs">  
                <ul class="tab-links">
                    <li><a href="#tab1">tab 1</a></li>
                    <li><a href="#tab2">tab 2</a></li>
                    <li><a href="#tab3">tab 3</a></li>
                </ul>
                <div class="tab-content">
                    <div id="tab1" class="tab active"> 
                        <h2>tab 1</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor. Aliquam euismod at lectus non malesuada. Proin in luctus purus. Sed dictum leo vitae est gravida consequat. </p>
                    </div>
                    <div id="tab2" class="tab">
                        <h2>tab 2</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor. .</p>
                        <p>Aenean sit amet hendrerit ex, a viverra nisi. Vivamus augue neque, sollicitudin eget sem non, commodo cursus orci. Ut facilisis justo nec sapien aliquam, non malesuada tortor congue.</p>
    ...

CSS

* {
	margin: 0;
	padding: 0;
	border: 0;

}
body {
    background-color: green;
    
}        
#wrapper {
	max-width: 1160px;
	border: 2px solid black;


}

#header {
	height: 150px;
	background-color: yellow;
}
            
#menu{
	list-style: none;
	font-weight: bold;
	float: right;
	padding-top: 0px;
	margin-top: 102px;
	position: relative;
	z-index: 5;
	max-width: none;
	margin-right: 6px;
}
#menu li{
	float: left;
	position: relative;
}
#menu a{
	display: block;
	padding: 5px;
	color: #000000;
	background-color: #FFFFFF;
	text-decoration: none;
}
#menu a:hover{
    color:#AB0000;
    background:#A8A8A8;
    text-decoration:underline;
}

#menu ul{
    background:#FFFFFF; 
     background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}
#menu ul li{
    padding-top:1px; 
    float:none;
}
#menu ul a{
    white-space:nowrap; 
}
#menu li:hover ul{ 
    left:0; 
}
#menu li:hover a{ 
    background:#B0B0B0;
    text-decoration:underline;
}
#menu li:hover ul a{ 
    text-decoration:none;
}
#menu li:hover ul li a:hover{ 
    background:#333;
}

#menu a.current {
	color:#AB0000;
	text-decoration: underline;
}
            
.tabs {
    width:100%;
    display:inline-block;
}

.tab-links:after {
    display:block;
    clear:both;
    content:'';
}

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}

.tab-links a {
    padding:9px 15px;
    display:inline-block;
    border-radius:3px 3px 0px 0px;
    background:#7FB5DA;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition:all linear 0.15s;
}

.tab-links a:hover {
    background:#a7cce5;
    text-decoration:none;
}

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}

.tab {
    display:none;
}

.tab.active {
    display:block;
}

JavaScript

$(document).ready(function() { 
   
	$('#menu li ul a').on('click', function(e)  {
        
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs 
        $('.tabs ' + currentAttrValue).show().siblings().hide();

        //big thanks to adriancarriger, this works if i am on the test.html page
        //if i am on another page like index.html nothing works
        $('.tabs .tab-links li').removeClass('active');
        $('.tab-links a[href$="' + currentAttrValue + '"]').parent().addClass('active');
 
        e.preventDefault();
    });
    
    
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
        
        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).show().siblings().hide();
      
        
        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');
       
        e.preventDefault();
    });
    
    
});