Javascript 问题：当前div中的任务完成后将消失

这是我的HTML：

<form action="index.php" method='post'>
<div class="task-btn">
    <button class="task-info" name="update-animal" onclick="show('update')">Update</button>
    <button class="task-info" name="add-animal" onclick="show('add')">Add</button>
    <button class="task-info" name="dlt-animal" onclick="show('delete')">delete</button>
</div>
<?php if($template == 1): ?>
    <div id="update">
    </div>
<?php endif; ?>
<?php if($template == 2): ?>
    <div id="add">
    </div>
<?php endif; ?>
<?php if($template == 3): ?>
    <div id="delete">
    </div>
<?php endif; ?>

以下是我的Javascript：

 var update = document.getElementById('update');
var add = document.getElementById('add');
var dlt = document.getElementById('delete');


function show(element) {
    if(element == 'update'){
        update.style.display = 'block';
        add.style.display = 'none';
        dlt.style.display = 'none';
    }
    else if(element == 'add'){
        add.style.display = 'block';
        update.style.display = 'none';
        dlt.style.display = 'none';
    }
    else if(element == 'delete'){
        dlt.style.display = 'block';
        update.style.display = 'none';
        add.style.display = 'none';
    }
}

我想要的是单击tasks按钮并显示相应的模板。问题是，当我更新/添加/删除数据库中的一些数据时，它会刷新页面，使其只显示三个按钮，而不显示您所在div的内容。

---

如果您需要用于add div的php来查看发生了什么，请告诉我我会发送它。

好的，您有问题了。您不希望在任务完成后刷新页面。 因此，在函数名前单击

onclick

，添加

return

。函数应该返回false到onclick。这意味着在HTML部件中，使用以下命令更改按钮部件代码：

<button class="task-info" name="update-animal" onclick="return show('update')">Update</button>
<button class="task-info" name="add-animal" onclick="return show('add')">Add</button>
<button class="task-info" name="dlt-animal" onclick="return show('delete')">delete</button>

---

您的解释不清楚，单击任何按钮后，您究竟希望看到什么？除此之外，你重复id=“updated”3次，这是你想要的吗？我在div类的名称上犯了一个错误，我要编辑它来修复这个错误。但我的问题是，当我点击任务按钮add animal并将该动物的信息完美地添加到数据库中时，add animal div中会出现一条消息，告诉我们一切都进行得很顺利，但是页面会自动刷新，我不知道一切是否顺利。你想让我发布我的add animal div的代码吗？如果add animal div中只有成功消息，那么就不需要发布它了。这里有两个选项：将参数传递到url（例如？success=true）并在页面刷新后访问它，或者不刷新并使用ajax

<button class="task-info" name="update-animal" onclick="return show('update')">Update</button>
<button class="task-info" name="add-animal" onclick="return show('add')">Add</button>
<button class="task-info" name="dlt-animal" onclick="return show('delete')">delete</button>

function show(element) {
 if(element == 'update'){
        update.style.display = 'block';
        add.style.display = 'none';
        dlt.style.display = 'none';
    }
    else if(element == 'add'){
        add.style.display = 'block';
        update.style.display = 'none';
        dlt.style.display = 'none';
    }
    else if(element == 'delete'){
        dlt.style.display = 'block';
        update.style.display = 'none';
        add.style.display = 'none';
    }
return false;
}