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

Reply via email to