Javascript jquery在单击搜索按钮并显示结果时隐藏div

新手，我的jquery现在有问题。当我单击search时，结果发布在右侧的div上，唯一的问题是div1无法隐藏。请帮忙

这里是我的代码到目前为止的组成。只是把divid=tab1的hide函数搞砸了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./js/sample.js"></script>
<script src="./js/quicksearch.js"></script>
<script src="./js/lytebox.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
<link rel="stylesheet" type="text/css" href="./css/table_blue.css">
<link rel="stylesheet" type="text/css" href="./css/lytebox.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script>

$(function () {

    var $dtps = $("#datepicker, #datepicker2"); //use a class selector to simplify this

    $dtps.hide().datepicker({
        dateFormat: 'yy/mm/dd'
    });
    $("#category").on('change', function () {
        $dtps.toggle(this.value == 'ORIGINAL_DEADLINE')
    });
    //should be outside of the change event hanlder
    $("#cmdsearch").click(function () {
        //e.preventDefault();
        $("#tab1").hide();
        $("#tab_result").show();
    });
});
</script>
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Overdue</a></li>
        <li><a href="#tab2">Next 60 days</a></li>
        <li><a href="#tab3">Others</a></li>
        <li><a href="#tab4">No Deadline</a></li>
        <li><a href="#tab5">Finished Documents</a></li>
        <li><a href="./reg.php">Register User</a></li>
        <li><a href="./report.php">Generate Report</a></li>
        <li><a href="./manage_users.php">Manage Users</a></li>
        <li><a href="./logout.php">Logout</a></li>
    </ul>
    <form method="post" action="beta_table.php">
        Category<select name="category" id="category">
        <option value='APP_NUMBER' >APP_NUMBER</option>
        <option value='SPOC_ASSIGNED' >SPOC_ASSIGNED</option>
        <option value='BORROWER_NAME' >BORROWER_NAME</option>
        <option value='DEFERRED_TYPE' >DEFERRED_TYPE</option>
        <option value='ORIGINAL_DEADLINE' >ORIGINAL_DEADLINE</option>
        </select>
        Search Text<input type="text" name="txtsearch" placeholder="Type to Search" />
        <input type="text" id="datepicker" name="date1" placeholder="Input Start Date"/> 
        <input type="text" id="datepicker2" name="date2" placeholder="Input End Date"/>  
        <input type="submit" id="cmdsearch" name="cmdsearch" value="Search" />
    </form>


    <div class="tab-content">
        <div id="tab1" class="tab active" >
          <?php
        //conection: 
    include "conn.php";
     //consultation: 
     $query = "SELECT * FROM export_workflow.COLLATERAL_MANAGEMENT where DATEDIFF(CURDATE(),ORIGINAL_DEADLINE)>1 and SUBMITTED_PENDING='PENDING'"; 
     //execute the query. 
     if($result = $link->query($query)){
           echo "<table class='data' id='table_example'>".
                "<thead>".
                "<tr>".
                "<td>App Number</td>".
                "<td>Spoc Assigned</td>".
                "<td>Borrower Name</td>".
                "<td>App Finish Date</td>".
                "<td>Developer & Project</td>".
                "<td>Collateral Address Details</td>".
                "<td>Deferred Document</td>".
                "<td>Deferred Type</td>".
                "<td>Original Deadline</td>".
                "<td>Date Completed</td>".
                "<td>SPOC Remarks</td>".
                "<td>File Location</td>".
                "<td>JUW MA Remarks</td>".
                "<td>COSU Remarks</td>".
                "<td>SMU Notes</td>".
                "<td>SUBMITTED/PENDING</td>".
                "<td> EDIT </td>".
                "</tr></thead>";

          while($row = $result->fetch_assoc()){
                echo "<tr><td>".$row['APP_NUMBER']."</td>".
                 "<td>".$row['SPOC_ASSIGNED']."</td>".
                 "<td>".$row['BORROWER_NAME']."</td>".
                 "<td>".$row['APP_FINISH_DATE']."</td>".
                 "<td>".$row['DEVELOPER_PROJECT']."</td>".
                 "<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
                 "<td>".$row['DEFERRED_DOCUMENT']."</td>".
                 "<td>".$row['DEFERRED_TYPE']."</td>".
                 "<td>".$row['ORIGINAL_DEADLINE']."</td>".
                 "<td>".$row['DATE_COMPLETED']."</td>".
                 "<td>".$row['SPOC_REMARKS']."</td>".
                 "<td>".$row['FILED_LOCATION']."</td>".
                 "<td>".$row['JUW_MA_REMARKS']."</td>".
                 "<td>".$row['COSU_REMARKS']."</td>".
                 "<td>".$row['SMU_NOTES']."</td>".
                 "<td>".$row['SUBMITTED_PENDING']."</td>".
                 "<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".
                 "</tr>";

          }
          $result->close();
          echo "</table>\r\n";
        } else {
          printf("<p>Error: %s</p>\r\n", $mysqli->error);
        }
        ?>    
        </div>

        <div id="tab_result">
            <?php 
        if(isset($_POST['cmdsearch'])){
        $category=$_POST['category'];
        $text=$_POST['txtsearch'];
        $date1=$_POST['date1'];
        $date2=$_POST['date2'];



//connect to db

     $link = mysqli_connect("10.20.8.70","stcutie","qwerty123","export_workflow") or die("Error " . mysqli_error($link)); 
     if($link->connect_error){
          printf("Connect failed: %s\n", $mysqli->connect_error);
          exit();
     }

    if($category==='ORIGINAL_DEADLINE'){
         $sql="SELECT * FROM COLLATERAL_MANAGEMENT where ($category BETWEEN '$date1' AND '$date2')";

    }else{
            $sql="SELECT * FROM COLLATERAL_MANAGEMENT where $category LIKE '%$text%'";

    }

    if (mysqli_query($link, $sql)) {

            } else {
                echo "Error: " . $sql . "<br>" . mysqli_error($link);

            }

        $result = $link->query($sql);
         echo "<table class='data' id='table_example'>".
                "<thead>".
                "<tr>".
                "<td>App Number</td>".
                "<td>Spoc Assigned</td>".
                "<td>Borrower Name</td>".
                "<td>App Finish Date</td>".
                "<td>Developer & Project</td>".
                "<td>Collateral Address Details</td>".
                "<td>Deferred Document</td>".
                "<td>Deferred Type</td>".
                "<td>Original Deadline</td>".
                "<td>Date Completed</td>".
                "<td>SPOC Remarks</td>".
                "<td>File Location</td>".
                "<td>JUW MA Remarks</td>".
                "<td>COSU Remarks</td>".
                "<td>SMU Notes</td>".
                "<td>SUBMITTED/PENDING</td>".
                "<td> EDIT </td>".
                "</tr></thead>";

        while($row = $result->fetch_assoc()){
                echo "<tr><td>".$row['APP_NUMBER']."</td>".
                 "<td>".$row['SPOC_ASSIGNED']."</td>".
                 "<td>".$row['BORROWER_NAME']."</td>".
                 "<td>".$row['APP_FINISH_DATE']."</td>".
                 "<td>".$row['DEVELOPER_PROJECT']."</td>".
                 "<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
                 "<td>".$row['DEFERRED_DOCUMENT']."</td>".
                 "<td>".$row['DEFERRED_TYPE']."</td>".
                 "<td>".$row['ORIGINAL_DEADLINE']."</td>".
                 "<td>".$row['DATE_COMPLETED']."</td>".
                 "<td>".$row['SPOC_REMARKS']."</td>".
                 "<td>".$row['FILED_LOCATION']."</td>".
                 "<td>".$row['JUW_MA_REMARKS']."</td>".
                 "<td>".$row['COSU_REMARKS']."</td>".
                 "<td>".$row['SMU_NOTES']."</td>".
                 "<td>".$row['SUBMITTED_PENDING']."</td>".
                 "<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".

                 "</tr>";
    }
    }
        ?>
        </div>

    </div>

$（函数（）{
var$dtps=$（“#日期选择器，#日期选择器2”）；//使用类选择器来简化此过程
$dtps.hide（）.datepicker({
日期格式：“年/月/日”
});
$（“#类别”）。关于（'change'，function（）{
$dtps.toggle（this.value==“原始截止日期”）
});
//应在更改事件handler之外
$（“#cmdsearch”）。单击（函数（）{
//e、 预防默认值（）；
$（“#tab1”）.hide（）；
$（“#选项卡_结果”）.show（）；
});
});











类别
应用程序编号
指定的SPOC_
借款人姓名
延迟型
原定截止日期
搜索文本
尝试添加此someware，只需调用removeDiv（）

您正在使用提交按钮的onclick事件隐藏div（id=tab1）

<input type="submit" id="cmdsearch" name="cmdsearch" value="Search" />



提交按钮用于提交表单。因此，当您单击它时，它会将表单数据提交到“beta_table.php”，并刷新页面。如果要隐藏div（id=tab1），可以使用如下按钮

 <input type="button" id="cmdsearch_btn" name="cmdsearch_btn" value="Search" />



你必须根据你的需要来决定。当使用提交按钮提交页面时，隐藏div没有意义，因为页面会刷新。我希望这能有所帮助。
现在我明白了。这是我第一次使用按钮，与提交按钮相同吗？不。默认情况下，提交按钮用于提交表单。但是，您也可以使用JavaScript或jQuery使用普通按钮提交表单。您能帮我了解一下按钮吗？您必须首先明确定义您想要什么。然后我可以提供帮助。当您单击submit按钮时，id为“tab_search”的div上的页面获取查询并显示结果，然后隐藏id为tab1的div