[EMAIL PROTECTED] wrote:
Hello. I am new to this group.
I would like to implement tab plugin into my site. I have read the
articles on
http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/
but i am still have problems figuring out howto make this run.
Here is my code.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$.tabs = function(containerId, start) {
var ON_CLASS = 'on';
var id = '#' + containerId;
var i = (typeof start == "number") ? start - 1 : 0;
$(id + '>div:lt(' + i + ')').add(id + '>div:gt(' + i +
')').hide();
$(id + '>ul>li:nth-child(' + i + ')').addClass(ON_CLASS);
$(id + '>ul>li>a').click(function() {
if (!$(this.parentNode).is('.' + ON_CLASS)) {
var re = /([_\-\w]+$)/i;
var target = $('#' + re.exec(this.href)[1]);
if (target.size() > 0) {
$(id + '>div:visible').hide();
target.show();
$(id + '>ul>li').removeClass(ON_CLASS);
$(this.parentNode).addClass(ON_CLASS);
} else {
alert('There is no such container.');
}
}
return false;
});
};
</script>
<div id="container">
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
<div id="section-1">
...
</div>
<div id="section-2">
...
</div>
<div id="section-3">
...
</div>
</div>
Any suggestions on what I am doing wrong? Thanks
You are using the oldest version possible. You may want to have a look
at the demo:
http://stilbuero.de/jquery/tabs/
and see what is possible with the plugin today. You can also download
the latest version together with some working CSS from there.
-- Klaus
