You have two ways of achieving this.
HTML markup (for testing, as you didn't provide any)
<p>
<a href="#blog">Blog</a>
<a href="#software">Software</a>
<a href="#about">About</a>
</p>
<div id="container">
<div id="blog">Blog</div>
<div id="software">Software</div>
<div id="about">About</div>
</div>
- First (my choice) is to forget about using Javascript and do everything with simple CSS:
CSS
a {
display: inline-block;
margin: 0 5px;
}
div {
width: 300px;
/* 1200px would be too much to test on jsFiddle */
height: 200px;
color: white;
}
#container {
overflow: hidden;
}
#container > div {
display: inline-block;
}
#blog {
background-color: red;
}
#software {
background-color: blue;
}
#about {
background-color: green;
}
Demo: http://jsfiddle.net/JWzaw/1/
- Second is to use jQuery (Javascript) as you proposed:
CSS
a {
display: inline-block;
margin: 0 5px;
}
div {
width: 300px;
/* 1200px would be too much to test on jsFiddle */
height: 200px;
color: white;
}
#container {
position: relative;
overflow: hidden;
}
#container > div {
position: absolute;
top: 0px;
}
#blog {
left: 0px;
background-color: red;
}
#software {
left: 300px;
background-color: blue;
}
#about {
left: 600px;
background-color: green;
}
jQuery (Javascript)
$(function () {
$("a").on("click", function (e) {
e.preventDefault();
var left = 300;
$("#container > div").not($(this)).each(function (ind, el) {
$(this).css("left", left + "px");
left += 300;
});
$($(this).prop("hash")).css("left", "0px");
});
});