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