Sure, here’s a demo
And here’s the code:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://skusobnastranka1.php5.sk/" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hide / show content with JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body { height:1100px; }
body { width: 100%; }
.main {
height: 1000px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
border-top-left-radius: 42px;
border-top-right-radius: 42px;
-moz-box-shadow: 15px 15px 15px #CCC;
-webkit-box-shadow: 7px 7px 7px #CCC;
box-shadow: 20px 20px 20px #000;
background-color: #DFDEDE;
}
.menu {
height: 60px;
width: 900px;
margin-top: 63px;
margin-right: auto;
margin-left: auto;
background-image: url(menu8.jpg);
}
.content {
left:0px;
top: 93px;
position:relative;
padding-bottom: 30px;
}
.hcontent {
margin-top:230px;
font-size: 25px;
color:black;
}
#navigation a{
color: #fff;
padding-right:25px;
font-size: 19px;
position:relative;
top:15px;
left:180px;
}
#navigation a:hover { color: #000; }
ul {
width: 500px;
display: table;
table-layout: fixed;
}
ul li { display: table-cell; }
.panel{
min-width: 65%;
overflow-y: hidden;
overflow-x: hidden;
display: none;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="menu">
<ul id="navigation">
<li><a data-tab="#home" href="#">Home</a></li>
<li><a data-tab="#link1" href="#">link1</a></li>
<li><a data-tab="#link2" href="#">link2</a></li>
<li><a data-tab="#link3" href="#">link3</a></li>
<li><a data-tab="#link4" href="#">link4</a></li>
<li><a data-tab="#link5" href="#">link5</a></li>
</ul>
</div>
</div>
<div id="home" class="panel">
<div class="hcontent">
Homepage content
</div>
</div>
<div id="link1" class="panel">
<div class="hcontent">
Link 1 Content
</div>
</div>
<div id="link2" class="panel">
<div class="hcontent">
Link 2 Content
</div>
</div>
<div id="link3" class="panel">
<div class="hcontent">
Link 3 Content
</div>
</div>
<div id="link4" class="panel">
<div class="hcontent">
Link 4 Content
</div>
</div>
<div id="link5" class="panel">
<div class="hcontent">
Link 1 Content
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$("#navigation a").on("click", function(e){
e.preventDefault();
var currTab = $(this).data("tab");
localStorage.setItem("currentTab", currTab);
$(".panel").hide();
$(currTab).fadeIn();
});
var lastSelectedTab = localStorage.getItem("currentTab");
if (!lastSelectedTab) {
lastSelectedTab = "#home";
}
$(lastSelectedTab).fadeIn();
</script>
</body>
</html>
Any questions, just let me know.