Simple Tutorial: How to use jQuery&CSS to show or hide tab contents without page jump
Published by Aslam
While making elements in your website or blog 'beautiful and easy to navigate', you will have to adjust elements in an order.
Here we going to lean how to set up a navigation system which shows single section's content at a time as per user condition and where a group of multiple sections exist,without page jump.
just like the example below.
Contents in tab 1 section
So here we go.
Hope you have understanding of jQuery, CSS,and HTML.
Here we going to lean how to set up a navigation system which shows single section's content at a time as per user condition and where a group of multiple sections exist,without page jump.
just like the example below.
First, lets make our navigation menu for calling tabs.
<div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1">tab 1</a>
</li>
<li>
<a href="#tab2">tab 2</a>
</li>
<li>
<a href="#tab3">tab 3</a>
</li>
</ul>
</div>
Then next to that, lets setup our sections where each section will have id like tab1,tab2,tab3 in this order.
<section id='tab1' class="tab-content active">
Contents in tab 1 section
</section>
<section id='tab2' class="tab-content hide">
Contents in tab 2 section
</section>
<section id='tab3' class="tab-content hide">
Contents in tab 3 section
</section>
Now, lets style our navigation menu and sections with CSS
<style type='text/css'>
.nav {
margin-bottom: 18px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav-tabs{
*zoom: 1;
}
.nav-tabs:before,
.nav-tabs:after {
display: table;
content: "";
}
.nav-tabs:after {
clear: both;
}
.nav-tabs > li {
float: left;
}
.nav-tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: -1px;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 18px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
li {
line-height: 18px;
}
.tab-content.active{
display: block;
}
.tab-content.hide{
display: none;
}
</style>
Next, we need to Call jQuery, if you have already called jQuery in your document, then skip this step.
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
Now, the last step, We have to display our tab2 section when we click on it. same time we have to hide the other tabs.
Our jQuery code is below
<script type='text/javascript'>
$(document).ready(function() {
$('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');
//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');
});
});
</script>
We are done!
Go play with it.
Here is a sample demo you can play with !
Comments
Post a Comment