Question

我有一个 index.php ，其中有一个包含内容的 #container div和一个 #open 按钮。页面上还有2个标签。

...
<div id="Tabs">
    <div id="content1Tab"></div>
    <div id="content2Tab"></div>
</div>
<div id="container">
   <div id="content1">
       ..someContent...
       <button id="open1">Open</button>
   </div>
   <div id="content2">
       ..someContent...
       <button id="open2">Open</button>
   </div>
</div>

点击 content1Tab ，使用z-index，将 content1 带到容器的最前沿。

点击 content2Tab 将 content2 置于最前面。

$(document).ready(function(){ 
    $("#content1Tab, #content2Tab).click(function(event) {
            var myString = $(this).attr('id');
            var parts = myString.split("Tab");
            var thePart = parts[0];

            $("#content1, #content2).css('z-index', 7);
            $("#"+thePart).css('z-index',9);
       });
...

点击 open1 成功地从 page.php中加载 containerOther

Answer 1

如果我正确地遵循它，则它是在#container的内容中进行排序，首先将按钮绑定到jQuery功能。这样，绑定将丢失，因此当您再次单击这些按钮时，什么也不会发生。

解决方案是在内容刷新后再次绑定，我认为它带有回调函数：

$('#container').load("../index.php #"+thePart, function() {
    $('#open1').click(function(){
        $("#container").load("../page.php #containerOther> *");
    });
});

我认为在内容刷新后绑定一个单独的函数会更好，因为如果您使用上面的代码，则绑定问题将在首次成功刷新内容后发生：)。

如何关闭或使已加载的div返回其原始状态

1 个答案: