Question

我已经得到了我想要的大部分工作，但最后一点要求我把自己扔在stackoverflow众神上，因为我很难过。我有很多子菜单选项。当用户点击一个时，它用新内容替换另一个div的内容，并用class =“active”标记子菜单li。这部分很有用，但问题在于解除它。这是基本的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。我最终将#base_chara内容复制到一个单独的base_chara.php中，所以现在我有两个文件来跟踪该子菜单选项，呃。似乎必须有这样的方式：

#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级别上处理这个问题。谢谢！

Answer 1

在加载新内容之前，将div的原始内容存储在javascript变量中。然后检查用户是否选择了原始选项。从存储的内容中重新填充div。

Answer 2

我认为如果已经加载了内容而不是重新加载，我们会要求保留内容。因此，请将所有内容保留在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>

从div中删除load（）并返回原始div内容？

2 个答案: