At the start step is together with jquery library. You are able to do by utilizing following snippet.
1
|
|
Now embrace following css in between type tag. This css code convert your HTML unorder checklist tag into tab. I’ve eliminated many of the css code for Abbreviation. The entire css file is obtainable for obtain.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.tab_container {
border: 1px strong #999;
border–high: none;
clear: each;
float: left;
background: #fff;
}
.tab_content material {
padding: 5px;
font–measurement: 1.2em;
width:690px;
}
|
jQuery performs an important position in making a navigational dynamic tabber. following jQuery code snippet will convert your easy tab into Auto-hidable tabber.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(doc).prepared(perform(){
$(“.tab_content”).conceal();
$(“ul.tabs li:first”).addClass(“lively”).present();
$(“.tab_content:first”).present();
$(“ul.tabs li”).click on(perform() {
$(“ul.tabs li”).removeClass(“lively”);
$(this).addClass(“lively”);
$(“.tab_content”).conceal();
var activeTab = $(this).discover(“a”).attr(“href”);
$(activeTab).fadeIn(500);
return false;
});
});
|
You possibly can add animation by calling $(activeTab).animate()
jQuery perform. Please write us about this submit. (no spam :))
Supply techzoo.org