<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="index-page"> <div class="navbar-wrapper"> <div class="container"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About</a></li> <li><a href="#" class="contact">Contact</a></li> <li><a href="#" class="rates">Rates</a></li> </ul> </div> </div> </nav> </div> </div> <section id="home"> <div class="left-wrapper"> </div> <div class="right-wrapper"> </div> </section> <section id="about"> <div class="left-wrapper"> </div> <div class="right-wrapper"> </div> </section> </div>

/* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ body { color: #5a5a5a; overflow:hidden; } #index-page { background-color:#f33; } #index-page img { height:250px; } #about .left-wrapper, #contact .left-wrapper, #rates .left-wrapper{ background:#ccc; height:100%; width:50%; position:absolute; top:-100%; left:0; padding:100px; } #about .right-wrapper, #contact .right-wrapper, #rates .right-wrapper { background:#333; height:100%; width:50%; position:absolute; bottom:-100%; right:0; padding:100px; } #contact .left-wrapper { background:green; } #contact .right-wrapper { background:yellow; } #rates .left-wrapper { background:pink; } #rates .right-wrapper { background:silver; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: absolute; top: 0; right: 0; left: 0; z-index: 20; } /* Flip around the padding for proper display in narrow viewports */ .navbar-wrapper > .container { padding-right: 0; padding-left: 0; } .navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar .container { width: auto; } /*-----------------------------------------rotate page details----------------------------------------------------*/ #home .left-wrapper, #home .right-wrapper, #about .left-wrapper, #about .right-wrapper{ width:50%; height:500px; float:left; } #home .left-wrapper { background:#ddd; } #home .right-wrapper { background:#000; } #about .left-wrapper { background:#f33; } #about .right-wrapper { background:yellow; }

$('li a).on('click', function(){ $('#home').addClass('current'); });