将 .detach() 与页面上的多个 ajax 元素一起使用

Question

我正在使用 jQuery ajax 将数据库中的内容加载到页面中。我有多个内容 div，但一次只想查看一个 div。

我已经成功地将元素从 dom 中分离出来，但我不知道如何管理多个 div，以便一次只显示 1 个 div（而其他 div 保持分离）。

下面是我的代码，这里是一个 Fiddle：http://jsfiddle.net/XkzUK/

HTML：

<nav>
<ul id="site-nav">
<li class="nav1"><a href="#recent">Recent</a></li>
<li class="nav2"><a href="#highlights">Highlights</a></li>
</ul>
</nav>

<div id="content-listing">

<div id="recent">
<ul class="top-level">
</ul>
</div><!--end recent-->

<div id="highlights">
<ul class="top-level">
</ul>
</div><!--end highlights-->

</div><!--end content-listing-->​

JS：

var test; var test2
     //Recent $("#site-nav .nav1").on("click", function (event) {
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(typeof test === 'undefined') {
        test = $("#recent ul.top-level").load('/echo/html/', { html: '<li>1</li> <li>2</li> <li>3</li>' }, function () {
            //$(this).show().siblings().detach();
            alert("I'm new");
        });
    } else {
        test.appendTo("#content-listing");
        alert("I'm old");
    }
    event.preventDefault(); });

//Highlights $("#site-nav .nav2").on("click", function(event) {
    //test = $("#recent").detach();
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(typeof test2 === 'undefined') {
        test2 = $("#highlights ul.top-level").load('/echo/html/', { html: '<li>Apples</li> <li>Oranges</li> <li>Pears</li>' }, function () {
            //$(this).show().siblings().detach();
            alert("I'm new");
        });
    } else {
        test2.appendTo("#content-listing");
        alert("I'm old");
    }
    event.preventDefault(); });​

CSS：

.nav-active,.nav-active a{background-color:#fff;color:#e84182 !important;outline:none;}
.sub-active,.sub-active a{background-color:#fff;color:#e84182 !important;border:dotted 1px pink;border-width:1px 0 ;margin:-1px 0;outline:none;/*background:url(/assets/img/icon-branch.png) 2% 5px no-repeat #fff;*/}

#content-listing{background-color:#ea528d;}/*230px*/
#content-listing ul.top-level ul li{margin-left:5.882352941176%}
#content-listing li a{font-size:.8125em;line-height:1em;text-decoration:none;padding:2px 0;display:block;text-indent:2.678571428571%;outline:none;}
.visited{color:#ccc;}

#content-listing ul{z-index:4;position:relative;}/*230px*/
#content-listing ul.top-level{margin-top:5.3125em/*85px*/;}
#content-listing ul.top-level ul li{margin-left:6.521739130435%;}
#content-listing{width:29.113924050633%;float:left;padding-bottom:20010px;margin-bottom: -20000px;}
#content-listing li a{text-indent:6.521739130435%;/*15px*/}​

还有 jsFiddle：http://jsfiddle.net/XkzUK/

Answer 1

如果你想修复这个代码，当附加一个标签主体时，如果它已经被初始化，你也应该分离另一个标签。

if(test2) test2.detach()

更通用的代码是：

for(var i = 0; i < tabs.length; i++) {
    if(i != tabIndexToShow && tabs[i] != null) {
        tabs[i].detach()
    }
}

http://jsfiddle.net/nLMas/1/

但是，您应该认真考虑使用JQuery UI tabs（例如），它可以满足您的要求。

另外，请在此处发布之前清理、缩进和注释您的代码（或者更好，一直；=）