2012-02-11 3 views
0

jquery js를 사용하여 페이지로드에서 div를 숨기고 싶습니다. 그리고 나서 버튼을 클릭하면 그 div를 보여주고 싶습니다. 나는 열심히 노력해도 할 수 없다. 아래에 표시된 은 My jquery 함수이고 Div는 내가 페이지로드시 숨겨두고 버튼 클릭 이벤트에 표시하고 싶다.jquery effects on page load

<div id="newDiv"> 
      <fieldset class="fieldset"> 
       <legend>Add Salary Allounce Type:</legend> 
       <table cellpadding="0" cellspacing="0" align="center" class="table"> 
        <tr> 
         <td> 
          <asp:Label ID="LabelAllounceType" runat="server" Text="Allounce Type:"></asp:Label> 
         </td> 
         <td> 
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <asp:Label ID="LabelAllounceType1" runat="server" Text="Allounce Type:"></asp:Label> 
         </td> 
         <td> 
          <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
       </table> 
      </fieldset> 
<asp:Button ID="ButtonAddNew" runat="server" Text="Add New Type" OnClientClick="" />` 
     </div> 
<script> 
    $(document).ready(function() { 
       $('#ButtonAddNew').click(function() { 
        $('#newDiv').hide(); 
       }); 

      }); 
</script> 
+1

쉬운 솔루션은 #newDiv {없음 표시}을 추가하는 것입니다 귀하의 함수 변경 hide(); for show(); . 문서가로드되면 #newDiv를 숨기고 #ButtonAddNew를 클릭하면 표시합니다. – davidgmar

+0

어디서 jquery 함수를 호출합니까? 그리고 어떻게? –

+0

내가 의견을 말하면서 코드에서 보지 못했습니다 ... 정확히 달성하기를 원하는 것? 구체적으로 기재하십시오. – davidgmar

답변

3

음, 코드를 클릭하면 버튼이 숨겨져 있어야한다고 표시됩니다. 당신은 아마도 더 비슷한 것을 원할 것입니다 :

$(document).ready(function() { 
    $('#newDiv').hide(); // make sure the div is hidden on page load. You could also 
         // accomplish this by making it have a style of display: none 

    $('#buttonAddNew').click(function() { 
    // when the button is clicked, show the div. 
    $('#newDiv').show(); 
    }); 
}); 
+0

하지만이 함수는 어디에서 호출합니까? 왜냐하면 나는이 함수를 호출하지 않기 때문에이 효과가 브라우저에 표시되지 않기 때문입니다. –

+1

jQuery를 '' –

0

당신이해야 할 일은 디스플레이를 추가하는 것입니다 : none; 귀하의 div에 다음 프로그래밍 방식으로 그것을 보여줍니다.

<div id="newDiv" style="display:none;"> 

다음 자바 스크립트 쓰기에 :

<div id="newDiv"> 

변화에 다음, 당신의 CSS에 :

$('#ButtonAddNew').click(function(){ 
    $('#newDiv').css("display", "block"); 
}); 
+0

에 넣으면 "disiplay"에 오타가 생겼습니다. – davidgmar

+0

감사합니다. 그것을 바꿨습니다. – iAmClownShoe