JSFiddle - React, Tailwind, and code Playground
by jrweinb
JavaScript
$(document).ready(function(){
//References
var sections = $("#menu li");
var loading = $("#loading");
var content = $("#content");
var all_sections = $("*");
$("#menu li").children("#nav1 a").css("background-position", "left 0px");
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
//load selected section
switch(this.id){
case "nav1":
sections.children().not("#nav1 a").css("background-position", "left -36px");
sections.children("#nav1 a").css("background-position", "left 0px");
content.hide();
content.load("external.html", delayedHide);
break;
case "nav2":
sections.children().not("#nav2 a").css("background-position", "left -36px");
sections.children("#nav2 a").css("background-position", "left 0px");
content.hide();
content.load("external2.html", delayedHide);
break;
case "nav3":
sections.children().not("#nav3 a").css("background-position", "left -36px");
sections.children("#nav3 a").css("background-position", "left 0px");
content.hide();
content.load("external.html", delayedHide);
break;
case "nav4":
sections.children().not("#nav4 a").css("background-position", "left -36px");
sections.children("#nav4 a").css("background-position", "left 0px");
content.hide();
content.load("external2.html", delayedHide);
break;
default:
//hide loading bar if there is no selected section
delayedHide();
break;
}
});
function...