Menu
I am not sure how to explain my question, so I could not find anything by searching,but i will do my best to explain it.
I'm just starting to learn html/css and i am working on my first project, and i am curious how do I change content by clicking on navigation bar on the same html page.
here are my image examples:
378
asked Apr 05 '14 21:04
jQuery solution...here's a FIDDLE
To be able to use this you must include jQuery in the <head> section of your HTML document. e.g.
<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;
}
Put this script just before the </body> tag.
<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 wanna use AJAX for getting content
Of course first include jQuery library in your document like in previous example
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
then
Create folder includes in your root folder then in includes folder create folder named ext-content then in folder ext-content create couple of HTML documents named e.g content1.html, content2.html ... with different content you wish to show of course without doctype and other stuff from index page just simple content.
example of content page <div>Content</div>
Change previously created navigation into this
<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>
Leave only one section and in that section create div with class ext-content like below
<section>
<article>
<div class="ext-content">
</div>
</article>
</section>
Use this script instead of one in the previous example
$('nav li').click(function() {
$.ajax({
type: 'GET',
url: 'includes/ext-content/'+$(this).data('content')+'.html',
dataType: 'html',
success: function(response) {
$('.ext-content').html(response);
}
});
});
*Note: You don't need to use sections, articles e.t.c. you could use divs, spans...
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
