0

データベースからjQueryajaxを使用してページにコンテンツを読み込んでいます。コンテンツのdivが複数ありますが、一度に1つのdivのみを表示したいと思います。

要素をdomから正常に切り離すことができましたが、一度に1つのdivのみが表示されるように複数の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 に答える