JQuery Tab Tutorials Example with Codes
 |
| JQuery Tab Example |
Overview: What You will Need:
Jquery Tabbed system is Nice System to Display User Lastest Comments,Topc,User Without Re Loading Page.Some Websites are Use ths system to Show Lastest Post ,comments,user etc.
Use The below codes to create jquery tabbed system..
 |
| Jquery Tab Folder Structure |
index.html
style.css
script.js
jquery_latest.js
Note: Put All files In same Folder.
Download jquery_latest.js from ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
Code For index.html
<!DOCTYPE html>
<html>
<head>
<title>JQuery Responsive Tab System tutorials by ANJAN360.Blogspot.Com</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="jquery_latest.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="tab_system"><!-- start of tab_system-->
<ul id="tab_bar">
<li>
<a href="#">Latest Topic</a>
</li>
<li>
<a href="#">Latest Comments</a>
</li>
<li>
<a href="#">Latest User</a>
</li>
</ul>
<ul id="current" class="tab_list">
<li>
<a href="#">Tutorials Pad</a>
</li>
<li>
<a href="#">PHP tutorials</a>
</li>
<li>
<a href="#">Jquery Tutorials</a>
</li>
<li>
<a href="#">All Products</a>
</li>
</ul>
<ul id="favorite" class="tab_list">
<li>
<a href="#">Latest News</a>
</li>
<li>
<a href="#">Liked Post</a>
</li>
<li>
<a href="#">Install Windows 7</a>
</li>
<li>
<a href="#">Install Windows 8</a>
</li>
<li>
<a href="#">Install Windows 10</a>
</li>
</ul>
<ul id="all_time" class="tab_list">
<li>
<a href="#">ANJANBD</a>
</li>
<li>
<a href="#">RAJ</a>
</li>
<li>
<a href="#">JGANNATH</a>
</li>
<li>
<a href="#">Proloy</a>
</li>
</ul>
</div><!-- end of tab_system-->
</body>
</html>
Code For style.css
body{
font-family:Verdana;
font-size:13px;
}
ul{
padding:0;
margin:5px 0 0 0;
}
#tab_system{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
#tab_bar{
float:left;
}
#tab_bar li .running{
background:#fff;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
color:#000;
}
#tab_bar li{
list-style:none;
float:left;
}
#tab_bar li a{
padding:5px;
text-decoration:none;
background:#333;
border:#111;
color:#fff;
}
#tab_bar li a:hover{
background:red;
}
#tab_bar li a:nth-child(1),#tab_bar li a:nth-child(2){
margin-right:2px;
}
#tab_system .tab_list li{
list-style:none;
}
#tab_system .tab_list{
float:left;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
min-width:260px;
}
#tab_system .tab_list li a{
padding:5px;
text-decoration:none;
display:block;
float:left;
clear:both;
}
#tab_system .tab_list li a:hover{
text-decoration:underline;
color:green;
}
Code For script.js
//tab slider jquery code
$(document).ready(function(){//Default view
$('#current').show();
$('#tab_bar li:nth-child(1) a').addClass('running');
$('#favorite,#all_time').hide();
$('#tab_bar li:nth-child(1) a').click(function(event){//Fire when Current hit clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(2) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#current').fadeIn(500);
$('#favorite,#all_time').hide();
});
$('#tab_bar li:nth-child(2) a').click(function(event){//Fire when All time clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#favorite').fadeIn(500);
$('#current,#all_time').hide();
});
$('#tab_bar li:nth-child(3) a').click(function(event){//Fire when Favorite clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(2) a').removeClass('running');
$('#all_time').fadeIn(500);
$('#favorite,#current').hide();
});
});
That's it how to create jquery tab..
Please Comments If You have any Problems.
If You Like This Article Please Like US on Facebook.
Thank You for reading My Article.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.