Question

我有一个带有几个div的html页面和一个显示/隐藏div的jquery。我的问题是其中一个div包含一个带有提交按钮的表单。当然，每次单击提交按钮时，页面都会重新加载，这也会隐藏div。 如何阻止它隐藏提交按钮上的div？

我只想在单击菜单中的另一个href时隐藏div。我有PHP返回表单下的错误，但我不认为你们需要看到该代码。提前谢谢。

继承人jquery：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(200);   
      }
      else {
           $(this).hide(600); 
      }
 });
 }  
 </script>

这是html：

<div class="menu">
    <h1>Admin</h1>
    <a id="myHeader1" href="javascript:showonlyone('newboxes1');">View Products</a>
    <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Add Products</a>
    <a href="logout.php">LOGOUT</a>
</div>
<div class="newboxes" id="newboxes2" style="display: none;">
    <p><span class="error" style="margin-left:10%;">* Required </span>
    </p>
    <form action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>" method="post" enctype="multipart/form-data">

        <label>Barcode Number<span class="error">*</span></label>
        <input type="text" name="prod_num">
        <br>

        <label>Product Name<span class="error">*</span></label>
        <input type="text" name="prod_name">
        <br>

        <label>Description<span class="error">*</span></label>
        <input type="text" name="prod_desc">
        <br>

        <label>Category<span class="error">*</span></label>
        <select name="prod_cat">
            <option value="Accessories">Accessories</option>
            <option value="Exhaust Product">Exhaust Product</option>
            <option value="Engine Product">Engine Product</option>
            <option value="Intake Product">Intake Product</option>
        </select>
        <br>

        <label>Price<span class="error">*</span></label>
        <input type="text" name="prod_price">
        <br>

        <label>Select Image<span class="error">*</span></label>
        <input type="file" name="prod_img" style="width:auto;border:none;">
        <br>

        <input type="submit" name="submit" value="Add Product">

    </form>
</div>

Answer 1

您可以检查表单是否已提交。

<div class="newboxes" id="newboxes2" <?php if (empty($_POST)) { ?>style="display: none;"<?php }?>>

你应该用类和CSS来做这件事。

Answer 2

您可以使用CSS和正确的选择器来确保元素何时可见/隐藏。您只发布了内联样式，因此很难就更好的基于CSS的解决方案提出建议。但是，#newboxes2上的以下属性 -

style="display: none;"

- 将始终隐藏div，直到您的javascript更改内联样式属性。请尝试删除此属性。

更多建议：

避免使用内联样式。将所有CSS样式保存在.css文件中。从长远来看，它更容易管理。
考虑如何在没有javascript的情况下运行页面。并非所有浏览器都启用了javascript。（阅读渐进式增强功能）

希望这会有所帮助，祝你好运。

jquery show / hide with div包含表单和提交按钮

2 个答案: