한 탭의 데이터가 다른 탭에 복제되고 있습니다.

Question

JQuery 탭을 만들고 있는데,이 경우에는 iframe의 데이터가 모든 탭에서 복제되고 있습니다. https://drive.google.com/file/d/0B_Xsn54pdmU8bDRYeFZPU1RtQlU/edit?usp=sharing

이 원인을 어떤 생각 - html로 내의 .js 그냥이는 모습입니다

$(document).ready(function(){ 
    $('.tabs').tabs(); 
}); 

이 파일이

<div class="tabs"> 
     <ul> 
      <li><a href="#room_booking">Make A Booking</a></li> 
      <li><a href="#info"> Your Information </a></li> 
      <li><a href="#edit_pro"> Edit Your Information </a></li> 

     </ul> 

     <div id="room_booking"> 

      <iframe src="/booking/"> </iframe> 
     </div> 

     <div id="info"> 

      <fieldset> 

       <label>Name : </label><input class="box" type="text" value="{{ userprofile.first_name}} {{userprofile.last_name }}" readonly="" /> <br /> 
       <label>E-Mail: </label><input class="box" type="text" value="{{ userprofile.email }}" readonly="" /> <br /> 
       <label>User Name : </label><input class="box" type="text" value="{{ userprofile.username}}" readonly="" /> <br /> 

      </fieldset> 

     </div> 

     <div id="#edit_pro"> 
      <iframe src="/edit/"> </iframe> 
     </div> 

    </div> 

처럼 보인다? 감사합니다

Answer 1

은 edit_pro DIV ID와 '#'를 제거합니다.

<div class="tabs"> 
      <ul> 
       <li><a href="#room_booking">Make A Booking</a></li> 
       <li><a href="#info"> Your Information </a></li> 
       <li><a href="#edit_pro"> Edit Your Information </a></li> 
      </ul> 
      <div id="room_booking"> 
       <iframe src="/booking/"> </iframe> 
      </div> 
      <div id="info"> 
       <fieldset> 
        <label>Name : </label><input class="box" type="text" value="{{ userprofile.first_name}} {{userprofile.last_name }}" readonly="" /> <br /> 
        <label>E-Mail: </label><input class="box" type="text" value="{{ userprofile.email }}" readonly="" /> <br /> 
        <label>User Name : </label><input class="box" type="text" value="{{ userprofile.username}}" readonly="" /> <br /> 
       </fieldset> 
      </div> 
      <div id="edit_pro"> 
       <iframe src="/edit/"> </iframe> 
      </div> 
     </div> 

데모 : 당신이 비활성 탭을 숨기는 일부 CSS 누락있는 것처럼 http://jsfiddle.net/kX5L2/1/