Having tabbed feature in web is gaining lots of popularity, as it can contain lot
of information arranged in a creative fashion within a short area. To design the
feature using core javascript may takes a lot of time and labor but using prototypeJs
and jquery, you can design it in a short period of time with minimum effort.
If you want to design using jQuery, click
here.
Reuires jQuery Library
If you want to design using jQuery, click
here. There is one more design
which you can browse from
here. To view the tabbing in a clean window, you can hit
here
Requires this js file to create TAB
Whether you use jQuery or prototypejs, you need the stylesheet for styling your
tab. You can design your own or use an existing design. Requires CSS file for dress
up.
.navigationTabs {
height: 23px;
line-height: 23px;
border-bottom: 1px solid #ccc;
list-style:none;
}
.navigationTabs li {
float: left;
height: 23px;
line-height: 23px;
padding-right: 3px;
}
.navigationTabs li a{
float: left;
display: block;
height: 23px;
line-height: 23px;
padding: 0 10px;
overflow: hidden;
color: #52697E;
background-color: #eee;
position: relative;
text-decoration: none;
}
.navigationTabs li a:hover {
background-color: #f0f0f0;
}
.navigationTabs li a.active {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: 0px solid;
}
.tabsContent {
/*border: 1px solid #ccc;*/
border-top: 0px solid;
width: 100%;
overflow: hidden;
background-color:#fff;
}
.tab {
padding: 16px;
display: none;
}