在頁面上使用.detach（）和多個ajax元素

Question

我使用jQuery ajax將數據庫中的內容加載到頁面中。我有多個div的內容，但只想一次查看一個div。

我已經成功地從DOM分離的元素，但我不知道如何管理多個div，以便一次只有1個div顯示（而其他人保持分離）。

下面是我的代碼，這裏是一個小提琴：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（例如），它做什麼你正在嘗試做的。

而且還請，乾淨，縮進和張貼在這裏（或更好，所有的時間=）之前註釋代碼