0

人.jsp

 <script type="text/javascript">
        function validateadvance() {
            document.getElementById("fn").style.visibility = "visible";
            }

        $(function() {
            $(".dp").datepicker();
        });
    </script>
    </head>

    <body>
        <form>

             <table border="1" width="500" align="center">
                <tr>
                                 <td>
                                     <div id="left-pane"
                            style="float: left; width: 20%; padding-bottom: 350px">
                            <a href="person.jsp">Candidate_Details</a> <br> <a
                                href="jobsearch.jsp">Technical_Details</a> <br>
                        </div>
                    </td>

                    <td>
                        <div id="left-pane">
                            <br>
                            <br> ID <input type=text value="" maxlength="10" size="10">
                            <br>
                            <br> Name <select>
                                <option value="start">Startswith</option>
                                <option value="end">Endswith</option>
                                <option value="exact">Exact</option>
                                <option value="anywhere">Anywhere</option>
                            </select> <input type=text value=""> <br>
                            <br> Batch <select>
                                <option value="completed">JINIS Group</option>
                                <option value="intensionally quit">Brigade Group</option>
                                <option value="incomplete">Apurva Batch</option>
                                <option value="not taken">TCS Group</option>
                                <option value="all">All</option>
                            </select> <br>
                            <br> Test_Status <select>
                                <option value="approved">Approved</option>
                                <option value="onhold">On_Hold</option>
                                <option value="pending">Pending</option>
                                <option value="rejected">Rejected</option>
                            </select> <br>
                            <br>


                            <div id="fn" class="hidethis" style="visibility: 'hidden'">

                                Email <select>
                                    <option value="start">Startswith</option>
                                    <option value="end">Endswith</option>
                                    <option value="exact">Exact</option>
                                    <option value="anywhere">Anywhere</option>
                                </select> <input type=text value=""> <br>
                                <br> Password <select>
                                    <option value="start">Startswith</option>
                                    <option value="end">Endswith</option>
                                    <option value="exact">Exact</option>
                                    <option value="anywhere">Anywhere</option>
                                </select> <input type=text value=""> <br>
                                <br> Job Processed <select>
                                    <option value="businessman">Businessman</option>
                                    <option value="ceo">CEO of the company</option>
                                    <option value="design manager">Design Manager</option>
                                    <option value="project leader">Project Leader</option>
                                </select> <br>
                                <br> Pdf_Export <input type="radio" name="pdf_export"
                                    value="yes">Yes <input type="radio" name="pdf_export"
                                    value="no">No <input type="radio" name="pdf_export"
                                    value="no">Both <br>
                                <br> Technical_TestStatus <select>
                                    <option value="completed">Completed</option>
                                    <option value="intensionally quit">Intentionally Quit</option>
                                    <option value="incomplete">Incomplete</option>
                                    <option value="not taken">Not Taken</option>
                                </select> <br>
                                <br> Test Inconsistency<br> <input type="checkbox"
                                    name="inconsistency" value="yes">Yes <input
                                    type="checkbox" name="inconsistency" value="no">No <input
                                    type="checkbox" name="inconsistency" value="no">Ok <br>
                                <br> Date_of_Test <input type="text" id="datepicker"
                                    class="dp" size="8" /> - <input type="text" id="datepicker1"
                                    class="dp" size="8" />
                            </div>

                            <div id="left-pane" align="center">

                                <br>
                                <br> <input type="button" value="Search"
                                    style="width: 130px; height: 35px;" />&nbsp;&nbsp; <input
                                    type="button" value="AdvancedSearch"
                                    onclick="return validateadvance()"
                                    style="width: 130px; height: 35px;" />
                            </div>
                    </td>
                             </tr>
            </table>

        </form>
    </body>

//当我在 Eclipse 中运行代码时，在开始时 id 为“fn”的 div 是隐藏的，并且在高级搜索的 onclick 中该 div 是可见的，但是在浏览器中运行它时，当页面加载时，div 是可见的。所以请任何人都可以帮助我如何使 div 在开始时隐藏并在按钮单击时可见，即使在浏览器中也是如此。

4

3 回答 3

0

您应该确保仅在加载 DOM 后才执行 JavaScript。否则，JavaScript 将在div加载到页面之前运行。要使用 jQuery 做到这一点，您可以简单地包装现有代码，如下所示：

$(document).ready(function() {
    ... your JS code ...
});

......应该这样做。

但是，您还需要隐藏它。这意味着将可见性设置为hidden，而不是visible。

于 2013-10-03T04:41:15.673 回答
0

试试这种风格

//html
<div id="fn" class="hidethis" style="display: none;">

//javascript
function validateadvance() {
    document.getElementById("fn").style.display = "block";
}
于 2013-10-03T04:44:35.890 回答
0 
<script type="text/javascript">
        function validateadvance() {
            document.getElementById("fn").style.visibility = "visible";

        }

        $(function() {
            $(".dp").datepicker();
            document.getElementById("fn").style.visibility = "hidden";
        });
    </script>
于 2013-10-03T04:49:22.877 回答