高级选项卡 - 选项卡内的选项卡 - JQuery

Question

我在现有标签中创建标签时遇到问题。我现在可以找到http://jakobmillerwt.com/scripts.html标签。它现在所做的是我可以在All-Knight-Paladin-Mage之间切换，并打开下面的替代品。我想要做的是为导航内的每个链接创建一个选项卡。

例如。我按下Knight然后打开链接Killer Caiman，Blue Djnn和Quara。当我按下其中任何一个时，我希望标签像主标签一样滑到一边，它会显示内部内容的div。

<ul class="nav">
            <li class="nav-one"><a href="#featured" class="current">All</a></li>
            <li class="nav-two"><a href="#core">Knight</a></li>
            <li class="nav-three"><a href="#jquerytuts">Paladin</a></li>
            <li class="nav-four last"><a href="#classics">Mage</a></li>
</ul>

<div class="list-wrap">

    <ul id="featured">
        <li><a href="http://forums.xenobot.net/showthread.php?3297-Jakob-Miller-Free-Scripting-Service&p=48933#post48933">[30+] Terramite - Farmine </a></li>
        <li><a href="http://forums.xenobot.net/showthread.php?3297-Jakob-Miller-Free-Scripting-Service&p=45763#post45763">[30+] Chakoya - Svargrond</a></li>
    </ul>

     <ul id="core" class="hide">
        <li><a href="http://forums.xenobot.net/showthread.php?3297-Jakob-Miller-Free-Scripting-Service&p=47002&viewfull=1#post47002">[100+] Killer Caiman - Farmine</a></li>
        <li><a href="http://forums.xenobot.net/showthread.php?3297-Jakob-Miller-Free-Scripting-Service&p=50059&viewfull=1#post50059">[100+] Blue Djinn - Yalahar</a></li>
        <li><a href="http://forums.xenobot.net/showthread.php?3297-Jakob-Miller-Free-Scripting-Service&p=50102#post50102">[140+] Quara - Hydra Island</a></li>

     </ul>

     <ul id="jquerytuts" class="hide">
        <li>Stuff in here!</li>
     </ul>

     <ul id="classics" class="hide">
        <li>Stuff in here!</li>
     </ul>

</div> <!-- END List Wrap -->

这是我现在的HTML代码。

#example-one { 
background: #E1E1E1; 
padding: 10px; 
margin: 0 0 15px 0; 
-moz-box-shadow: 0 0 5px #666; 
-webkit-box-shadow: 0 0 5px #666; 
width:420px; 
border-radius:6px;
margin-left:auto;
margin-right:auto;
border:1px solid #CCC;
}

#example-one .nav { overflow: hidden; margin: 0 0 10px 0;}
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 14px; text-align: center; border: 0; border-radius:3px; font-family:Arial, Helvetica, sans-serif;}
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; text-decoration:none;}
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; text-decoration:none;}
#example-one ul li a:hover, #example-one ul li a:focus { background: #999; color: white; border-radius: 3px; }
#example-one ul li:last-child a { border: none; }

#example-one li.nav-one a.current, ul.All li a:hover { background-color: #03F; color: white; }
#example-one li.nav-two a.current, ul.Knight li a:hover { background-color: #03F; color: white; }
#example-one li.nav-three a.current, ul.Paladin li a:hover { background-color: #03F; color: white; }
#example-one li.nav-four a.current, ul.Mage li a:hover { background-color: #03F; color: white; }

CSS。

(function($) {

    $.organicTabs = function(el, options) {

        var base = this;
        base.$el = $(el);
        base.$nav = base.$el.find(".nav");

        base.init = function() {

            base.options = $.extend({},$.organicTabs.defaultOptions, options);

            // Accessible hiding fix
            $(".hide").css({
                "position": "relative",
                "top": 0,
                "left": 0,
                "display": "none"
            }); 

            base.$nav.delegate("li > a", "click", function() {

                // Figure out current list via CSS class
                var curList = base.$el.find("a.current").attr("href").substring(1),

                // List moving to
                    $newList = $(this),

                // Figure out ID of new list
                    listID = $newList.attr("href").substring(1),

                // Set outer wrapper height to (static) height of current inner list
                    $allListWrap = base.$el.find(".list-wrap"),
                    curListHeight = $allListWrap.height();
                $allListWrap.height(curListHeight);

                if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {

                    // Fade out current list
                    base.$el.find("#"+curList).fadeOut(base.options.speed, function() {

                        // Fade in new list on callback
                        base.$el.find("#"+listID).fadeIn(base.options.speed);

                        // Adjust outer wrapper to fit new list snuggly
                        var newHeight = base.$el.find("#"+listID).height();
                        $allListWrap.animate({
                            height: newHeight
                        });

                        // Remove highlighting - Add to just-clicked tab
                        base.$el.find(".nav li a").removeClass("current");
                        $newList.addClass("current");

                    });

                }   

                // Don't behave like a regular link
                // Stop propegation and bubbling
                return false;
            });

        };
        base.init();
    };

    $.organicTabs.defaultOptions = {
        "speed": 200
    };

    $.fn.organicTabs = function(options) {
        return this.each(function() {
            (new $.organicTabs(this, options));
        });
    };

})(jQuery);

和Javascript。

我尝试使用

将功能放在标签中

$(function() {

    $("#example-one").organicTabs();
});

但它不想工作。