JSFiddle - React, Tailwind, and code Playground

by ASilver

HTML

<!-- Navigation -->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header mainmenue">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Website Name</a>
            </div>
            <div class="collapse navbar-collapse">
            <nav class="mainmenue">
                <ul class="nav navbar-nav">
                    <li><a href="#head">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#mywork">MyWork</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
             </nav>
        </div>
        <!-- Main (Home) section -->
        <section id="head">
          <h2>Home</h2>
          <p>This is a homepage</p>
        </section>

        <!-- Second (About) section -->
        <section id="about">            
          <h2>About</h2>
          <p>This is about me</p>
        </section>

        <!-- Third (Works) section -->
        <section id="mywork">
          <h2>My Work</h2>
          <p>This is my work</p>
        </section>

        <!-- Fourth (Contact) section -->
        <section id="contact">
          <h2>Contact</h2>
          <p>This is where to make contact</p>
        </section>

JavaScript

// global. currently active menu item 
var current_item = 0;

// few settings
var section_hide_time = 1000;
var section_show_time = 1000;

// jQuery stuff
jQuery(document).ready(function($) {

	// Switch section
	$("a", '.mainmenue').click(function() 
	{
		if( ! $(this).hasClass('active') ) { 
			current_item = this;
			// close all visible divs with the class of .section
			$('.section:visible').fadeOut( section_hide_time, function() { 
				$('a', '.mainmenu').removeClass( 'active' );  
				$(current_item).addClass( 'active' );
				var new_section = $( $(current_item).attr('href') );
				new_section.fadeIn( section_show_time );
			} );
		}
		return false;
	});		
});