1

私は自分がやりたいことのほとんどを手に入れましたが、この最後のビットでは、困惑しているので、stackoverflowの神々に身を投じる必要があります。サブメニューオプションの長いリストがあります。ユーザーが1つをクリックすると、別のdivのコンテンツが新しいコンテンツに置き換えられ、サブメニューliにclass="active"のマークが付けられます。この部分はうまく機能しますが、問題はそれを元に戻すことです。基本的なHTMLは次のとおりです。

<div id="coleft">
<ul id="charactermenu">
    <li id="base_chara" class="active">basic info</li>
    <li id="base_names" class="">names</li>
    <li id="base_speech" class="">speech</li>
    <li id="base_psyche" class="">psyche</li>
    <li id="base_personality" class="">personality</li>
    <li id="base_habits" class=" ">habits</li>
</ul>
<div id="coright">
    /... some content goes here
</div>

そして、これが#idを取り、divの内容を反転させる簡単なスクリプトです。

$('#charactermenu li').click(function() {
    var selection = $(this).attr('id');
    $("#coright").html(ajax_load).load( selection + ".php").fadeIn();
    $("#" + selection).addClass('active');
    $("#" + selection).siblings().removeClass("active");
});

ページを最初に開くと、デフォルトで#corightのコンテンツ（#base_chara）が表示されます。しかし、他の何かをクリックしてから最初のサブメニューオプション（#base_chara）に戻ると、他のdivと同じようにそのdivをロードする必要があります。#base_charaの内容を別のbase_chara.phpに複製することになったので、現在、そのサブメニューオプションを追跡するための2つのファイルがあります。このようなものへの道がなければならないようです：

#base_chara click(function)
    remove loaded php from div
    display original div contents
    removeClass for everyone else
    add active for #base_chara

しかし、この方法でdivを置き換えると、元のコンテンツは消去されますか？これを管理するための最も簡単で最良の方法は何ですか？Unload（）は（divだけでなく）ウィンドウ全体に関連しているようで、remove（）とempty（）は#corightに何も残しません。どこが間違っているのですか？

ETA：単純なインクルードの代わりにrequire_once（'dbconnect.php'）を使用することで、これを回避できることに気づきました。つまり、問題は解決されましたが、質問は未解決のままです。jquery/javascriptレベルでこれを処理する簡単な方法があるかどうかを知りたいのです。ありがとう！

4

2 に答える 2

1

リロードするのではなく、ロードされている場合はコンテンツを保持するようにお願いしていると思います。したがって、すべてのコンテンツをdivに保持し、表示したくないコンテンツは非表示にします。

エラーはチェックされません。

$('#charactermenu li').click(function() {
    var selection = $(this).attr('id');

    var el=$('#coright div[data-selection="' + selection + '"]');

    // does this item not have a pane?
    if (!el.length) {
        el=$('<div/>', {class:'pane'}).data('selection', selection)
            .appendTo('#coright')
            .html(ajax_load).load( selection + ".php");
    }
    el.fadeIn().siblings().fadeOut();
    $(this).addClass('active').siblings().removeClass('active');
});


<div id="coright">
    <div class="pane" data-selection="base_chara">
        /... some content goes here
    </div>
</div>
于 2012-11-25T06:07:00.427 に答える
1

新しいコンテンツをロードする前に、divの元のコンテンツをjavascript変数に保存します。次に、ユーザーが元のオプションを選択したかどうかを確認します。保存されたコンテンツからdivを再入力します。

于 2012-11-25T04:33:28.573 に答える