问题：当其中的任务完成时，当前的 div 消失

Question

这是我的 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; ?>

这是我的PHP：

$template = 0;

if (isset($_POST['update-animal'])) {

$template = 1;

}

if (isset($_POST['add-animal'])) {

$template = 2;

}

if (isset($_POST['dlt-animal'])) {

$template = 3;

}

这是我的 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';

    }

}

我想要的是单击任务按钮并显示相应的模板。问题是当我更新/添加/删除我的数据库中的一些数据时，它会刷新页面，因此它只会显示三个按钮而不是你所在的 div 的内容。如果您需要 add div 的 php 来查看发生了什么，请告诉我我会发送它。

Answer 1

好的，明白你的问题了。您不想在任务完成后刷新页面。所以在onclick函数名前添加return。该函数应该向 onclick 返回 false。这意味着在 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>然后在 javascript 函数中添加return false;这样的函数结尾：function show(element) {&nbsp;if(element == 'update'){&nbsp; &nbsp; &nbsp; &nbsp; update.style.display = 'block';&nbsp; &nbsp; &nbsp; &nbsp; add.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; dlt.style.display = 'none';&nbsp; &nbsp; }&nbsp; &nbsp; else if(element == 'add'){&nbsp; &nbsp; &nbsp; &nbsp; add.style.display = 'block';&nbsp; &nbsp; &nbsp; &nbsp; update.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; dlt.style.display = 'none';&nbsp; &nbsp; }&nbsp; &nbsp; else if(element == 'delete'){&nbsp; &nbsp; &nbsp; &nbsp; dlt.style.display = 'block';&nbsp; &nbsp; &nbsp; &nbsp; update.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; add.style.display = 'none';&nbsp; &nbsp; }return false;}