Question

person.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中运行代码时，在启动div处有id“fn”被隐藏并且onclick of advance搜索div是可见的但是当在浏览器中运行时div在页面加载时是可见的。所以，任何人都可以帮助我如何在开始时隐藏div，甚至在浏览器中点击按钮即可看到。

Answer 1

您应确保仅在加载DOM后才执行JavaScript。否则，JavaScript将在div被加载到页面之前运行。要使用jQuery执行此操作，您可以简单地将现有代码包装为：

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

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

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

Answer 2

尝试这种风格

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

//javascript
function validateadvance() {
    document.getElementById("fn").style.display = "block";
}

Answer 3

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

        }

        $(function() {
            $(".dp").datepicker();
            document.getElementById("fn").style.visibility = "hidden";
        });
    </script>

在页面加载时隐藏div

3 个答案: