Build tab using jQuery
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. Logo of jQueryjs 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 Logo of prototypejs 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;
}
            

No  Responses to "Build tab using jQuery"

Leave a Reply