jquery default div with css

Question

버튼 클릭시 다른 DIV를로드하는 DIV가 있지만로드 될 기본 DIV가 해당 CSS를 CSS에 등록하지 않습니다. 제 CSS는 꽤 길고 아니오입니다. "ProfileSettingsContainer"DIV 내부의 요소들에 의존합니다. CSS에서이 DIV를 기본으로로드하려면 어떻게해야합니까? 감사.

 <script type="text/javascript"> 
      $(document).ready(function() { 
       // Load default div into 'LeftPanelinfo' Div 
       $("#leftpanelinfo").html($("#ProfileSettingsContainer").html()); 

       $(".settings").click(function() { 
        $("#leftpanelinfo").html($("." + $(this).attr('rel')).html()); 
       }); 


      }); 
     </script> 

    <div id="ProfileSettingsContainer" style="padding: 15px; height:400px; width:400px;"> 
     <div style="clear:both"> 
        <div style="float:left; width:40%">FirstName</div> 
        <div style="float:right; width:60%"><asp:TextBox ID="username" CssClass="FirstName" runat="server" /></div> 
     </div> 
     <div style="clear:both"> 
        <div style="float:left; width:40%">Last Name</div> 
        <div style="float:right; width:60%"> <asp:TextBox ID="TextBox1" CssClass="LastName" runat="server" /></div> 
     </div> 
     <div style="clear:both"> 
        <div style="float:left; width:40%">Birthdate</div> 
        <div style="float:right; width:60%">3</div> 
     </div> 
       <div style="clear:both"> 
        <div style="float:left; width:40%">Location Zipcode</div> 
        <div style="float:right; width:60%">3</div> 
     </div> 
       <div style="clear:both"> 
        <div style="float:left; width:40%">Biography</div> 
        <div style="float:right; width:60%">3</div> 
     </div> 
    </div> 

CSS: 

    #ProfileSettingsContainer:before 
     { 
      content: ''; 
      position: absolute; 
      z-index: -1; 
      border: 1px dashed #ccc; 
      top: 5px; 
      bottom: 5px; 
      left: 5px; 
      right: 5px; 
      -moz-box-shadow: 0 0 0 1px #fff; 
      -webkit-box-shadow: 0 0 0 1px #fff; 
      box-shadow: 0 0 0 1px #fff; 
     } 

     h1 
     { 
      text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5); 
      text-transform: uppercase; 
      text-align: center; 
      color: #666; 
      margin: 0 0 30px 0; 
      letter-spacing: 4px; 
      font: normal 26px/1 Verdana, Helvetica; 
      position: relative; 
     } 

     fieldset 
     { 
      border: 0; 
      padding: 0; 
      margin: 0; 
     } 

     #ProfileSettingsContainer input 
     { 
      padding: 15px 15px 15px 30px; 
      margin: 0 0 10px 0; 
      width: 250px; /* 353 + 2 + 45 = 400 */ 
      height: 4px; 
      border: 1px solid #ccc; 
      -moz-border-radius: 5px; 
      -webkit-border-radius: 5px; 
      border-radius: 5px; 
      -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; 
      -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; 
      box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; 
     } 

     #ProfileSettingsContainer input:focus 
     { 
      background-color: #fff; 
      border-color: #e8c291; 
      outline: none; 
      -moz-box-shadow: 0 0 0 1px #e8c291 inset; 
      -webkit-box-shadow: 0 0 0 1px #e8c291 inset; 
      box-shadow: 0 0 0 1px #e8c291 inset; 
     } 

     /*--------------------*/ 
     #actions 
     { 
      margin: 25px 0 0 0; 
     } 

     .submit 
     { 
      background-color: #ffb94b; 
      background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b)); 
      background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b); 
      background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b); 
      background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b); 
      background-image: -o-linear-gradient(top, #fddb6f, #ffb94b); 
      background-image: linear-gradient(top, #fddb6f, #ffb94b); 
      -moz-border-radius: 3px; 
      -webkit-border-radius: 3px; 
      border-radius: 3px; 
      text-shadow: 0 1px 0 rgba(255,255,255,0.5); 
      -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 
      border-width: 1px; 
      border-style: solid; 
      border-color: #d69e31 #e3a037 #d5982d #e3a037; 
      float: left; 
      height: 35px; 
      padding: 0; 
      width: 120px; 
      cursor: pointer; 
      font: bold 15px Arial, Helvetica; 
      color: #8f5a0a; 
     } 

     .submit:hover, .submit:focus 
     { 
      background-color: #fddb6f; 
      background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f)); 
      background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f); 
      background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f); 
      background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f); 
      background-image: -o-linear-gradient(top, #ffb94b, #fddb6f); 
      background-image: linear-gradient(top, #ffb94b, #fddb6f); 
     } 

     .submit:active 
     { 
      outline: none; 
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 
     } 

     .submit::-moz-focus-inner 
     { 
      border: none; 
     } 

Answer 1

왜냐하면 html()은 div 자체가 아닌 div의 내용을로드하기 때문입니다.

그래서 당신은

<div id="loadOuterDiv"> 
    <div id="ProfileSettingsContainer" style="..."> 
     ... 
    </div> 
</div> 

처럼 뭔가를 할 수 그리고

$("#leftpanelinfo").html($("#loadOuterDiv").html()); 

는 다른 방법으로 대신 #leftpanelinfo와 자바 스크립트 같은를 떠나 당신의 #ProfileSettingsContainer의 CSS를 적용 할 수 있습니다.