DOMAssistant-Tabs plugin

doTabs() method returns a DOM reference to the element on wich it is called (here : "wrapper").
Above example will apply "bg1" class to the element which id is "wrapper" after having created tabs.

Generated html code

<div id="wrapper">
	<div class="DATGpart" id="DATGpart_0">
		<div class="DATtagsBg">
			<ul id="DATtCont_0" class="ongletsCont">
				<li class="DATonglet"><a id="link_0_3" href="#">tab title</a></li>
				<li class="DATonglet"><a id="link_0_2" href="#">Second tab title</a></li>
				[...]
			</ul>
		</div>
		<div class="partsCont">
			<div id="DATpart_0_3" class="DATpart0">
				<h2>tab title</h2>
				<p>tab content</p>
			</div>
			<div style="display: none;" id="DATpart_0_2" class="DATpart0">
				<h2>Second tab title</h2>
				<p>Second tab content</p>
			</div>
		</div>
	[...]
	</div>
</div>

Used styles

div.DATtagsBg{
background:#fff url(../graph/onglets_bg.gif) left bottom repeat-x;
font-size:0.5em;
height: 2.0em;
}
ul.ongletsCont {
margin: 0 0 0 1em;
padding: 0.1em 0.5em 0;
list-style: none;
}
.ongletsCont li {
float: left;
margin: 0.2em 0 0 0;
padding: 0 0 0 0.5em;
line-height: 1.5em;
}
.ongletsCont a {
/* IE Mac only hack \*//*/
float:left;
/**/
display: block;
padding: 0.1em 1em 0.15em 0.5em;
text-decoration: none;
font-weight: bold;
color: #765;
outline: none;
}
.ongletsCont a:hover {
color: #333;
}
.ongletsCont li.DATonglet {
background: url(../graph/onglets_left.gif) no-repeat left top;
}
.ongletsCont li.DATonglet a {
background: url(../graph/onglets_right.gif) no-repeat right top;
}
.ongletsCont li.DATonglet.on {
background: url(../graph/onglets_left_on.gif) no-repeat left top;
line-height: 1.7em;
margin-top: 0;
}
.ongletsCont li.DATonglet.on a {
background: url(../graph/onglets_right_on.gif) no-repeat right top;
color: #333;
padding-bottom: 0.15em;
}

/*Content displayed after one tab has been clicked*/
div.partsCont {
clear: both;
border-width: 0 2px 2px 2px;
border-color: #000;
border-style: ridge;
padding: 1em 2em;
margin-top: 0;
background: #FDFDFC;
color: #080808;
}