jQuery显示/隐藏div包含表单和提交按钮

Question

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

我只希望div在菜单中单击另一个href时隐藏。 我有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更改内联样式属性为止。 尝试删除此属性。

更多建议：

1. 避免使用内联样式。 将所有CSS样式保留在.css文件中。 从长远来看，它更易于管理。
2. 考虑一下没有javascript的页面如何工作。 并非所有浏览器都启用了javascript。 （阅读有关渐进增强的内容）

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