javascript - Hide Div Control on Page Load - Stack Overflow

admin管理员组

文章数量:1324979

$(function () {
        $("#divLimitPrice").hide();
        $('#divLimitPrice').hide(); //even tried it with ''
    });

 <div id="divLimitPrice">Limit Price<br />
 <asp:TextBox ID="txtLimitPrice" runat="server"></asp:TextBox>
 </div>

My understanding is that this is supposed to work..... it wants to fight me. Any way to beat it into submission? Thanks all! - G

$(function () {
        $("#divLimitPrice").hide();
        $('#divLimitPrice').hide(); //even tried it with ''
    });

 <div id="divLimitPrice">Limit Price<br />
 <asp:TextBox ID="txtLimitPrice" runat="server"></asp:TextBox>
 </div>

My understanding is that this is supposed to work..... it wants to fight me. Any way to beat it into submission? Thanks all! - G

• javascript
• jquery
• html

Share Follow asked Jun 9, 2013 at 23:02 gmattesongmatteson 7944 silver badges1313 bronze badges 4

• You've included jQuery before that JS snippet, right? Also JS needs to be in <script> tags (although that could have been left out for the sake of conciceness) – Bojangles Commented Jun 9, 2013 at 23:06
• Here's the full script- thanks! <script type="text/javascript"> $(function () { $('#divLimitPrice').hide(); }); function OnSelection(me) { // find the selected value var SelectedValue = jQuery('option:selected', me).attr('value'); // if selected value = x then... if (SelectedValue == "Limit") jQuery("#divLimitPrice").show(); else jQuery("#divLimitPrice").hide(); } </script> – gmatteson Commented Jun 9, 2013 at 23:13
• That should be edited into your post - there's a button underneath the tags to do so – Bojangles Commented Jun 9, 2013 at 23:14
• Here is your code: jsfiddle/erdemkeren/VVfA3/7 It didn't try to fight. Seems submissively doing what it must... I don't want to say "check your jquery link" but there should be some bug hidden between your code snippets.. – Hilmi Erdem KEREN Commented Jun 9, 2013 at 23:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

It will flicker if you use JS as the script has to load first which means until it's loaded the div will remain visible on the DOM.

The easiest way to do this is to give your div a CSS class of display none like following. That way when the page is loaded it will already be hidden.

<div id="divLimitPrice" class="hide-div">Limit Price<br />

 hide-div { 
     display: none;
 }

When you need it to be shown you can use jQuery as follows:

$('#divLimitPrice').removeClass('hide-div')

Hope this helps.

Try this:

 <div id="divLimitPrice">Limit Price<br />
 <asp:TextBox ID="txtLimitPrice" runat="server"></asp:TextBox>
 </div>
<script>
    $(function () {
            $("#divLimitPrice").hide();
        });
</script>

I think your problem is the JS is executing before the page loads.

Try this:

$(document).ready(function(){
  $("#divLimitPrice").hide();
});

本文标签： javascriptHide Div Control on Page LoadStack Overflow