JQuery solution ... here a FIDDLE
To be able to use this, you must include jQuery in the section of <head>your HTML document. eg.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<div class="wrapper">
<nav>
<ul>
<li data-rel="1" class="active">Section 1</li>
<li data-rel="2">Section 2</li>
<li data-rel="3">Section 3</li>
<li data-rel="4">Section 4</li>
</ul>
</nav>
<section>
<article>
<h4>Section 1</h4>
</article>
</section>
<section>
<article>
<h4>Section 2</h4>
</article>
</section>
<section>
<article>
<h4>Section 3</h4>
</article>
</section>
<section>
<article>
<h4>Section 4</h4>
</article>
</section>
</div>
.wrapper {
position: relative;
width: 960px;
padding: 10px;
}
section {
background: #7f7f7f;
position: absolute;
display: none;
top: 10px;
right: 0;
width: 740px;
min-height: 400px;
color: #fff;
border: 4px solid #000;
}
section:first-of-type {
display: block;
}
nav {
float: left;
width: 200px;
}
ul {
list-style: none;
}
li {
background: #c3c3c3;
width: 100%;
height: 32px;
line-height: 32px;
margin-bottom: 10px;
text-align: center;
color: #fff;
cursor: pointer;
border: 4px solid #000;
}
.active {
background: #7f7f7f;
}
Place this script immediately before the tag </body>.
<script>
(function($) {
$('nav li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
$('section:nth-of-type('+$(this).data('rel')+')').stop().fadeIn(400, 'linear').siblings('section').stop().fadeOut(400, 'linear');
});
})(jQuery);
</script>
If you want to use AJAX to get content
, jQuery ,
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
includes , includes ext-content, ext-content HTML- , content1.html, content2.html... , , , doctype .
<div>Content</div>
<nav>
<ul>
<li data-content="content1" class="active">Section 1</li>
<li data-content="content2">Section 2</li>
<li data-content="content3">Section 3</li>
<li data-content="content4">Section 4</li>
</ul>
</nav>
div ext-content,
<section>
<article>
<div class="ext-content">
</div>
</article>
</section>
script
$('nav li').click(function() {
$.ajax({
type: 'GET',
url: 'includes/ext-content/'+$(this).data('content')+'.html',
dataType: 'html',
success: function(response) {
$('.ext-content').html(response);
}
});
});
* . , e.t.c. divs, spans...