1

我已经完成了我想要工作的大部分工作，但最后一点需要我把自己放在 stackoverflow 之神上，因为我很难过。我有一长串子菜单选项。当用户点击一个时，它会用新的内容替换另一个 div 的内容，并用 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 中，所以现在我有两个文件要跟踪该子菜单选项，呃。似乎必须有一种方法可以解决这样的问题：

#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 的原始内容存储在 javascript 变量中。然后检查用户是否选择了原始选项。从存储的内容中重新填充 div。

于 2012-11-25T04:33:28.573 回答
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 回答