0

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

我已经成功地将元素与 dom 分离，但我不知道如何管理多个 div，以便一次只显示 1 个 div（而其他 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/

4

1 回答 1

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 选项卡（例如）来执行您正在尝试做的事情。

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

于 2012-05-31T15:57:05.310 回答