비활성 탭에서 데이터를 어떻게 비 웁니 까?

Question

저는 데이터를 처리하기 위해 많은 div와 javascript가있는 대시 보드를 만들고 있습니다. 나는 탭을 기반으로 콘텐츠를 구성하는 것을 좋아합니다. 탭을 클릭하면 javascript로 처리되는 특정 정보를 표시하고 싶습니다.

<script> 
      // Wait until the DOM has loaded before querying the document 
      $(document).ready(function(){ 
       $('ul.tabs').each(function(){ 
        // For each set of tabs, we want to keep track of 
        // which tab is active and it's associated content 
        var $active, $content, $links = $(this).find('a'); 

        // If the location.hash matches one of the links, use that as the active tab. 
        // If no match is found, use the first link as the initial active tab. 
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
        $active.addClass('active'); 
        $content = $($active.attr('href')); 

        // Hide the remaining content 
        $links.not($active).each(function() { 
         $($(this).attr('href')).hide(); 
        }); 

        // Bind the click event handler 
        $(this).on('click', 'a', function(e){ 
         // Make the old tab inactive. 
         $active.removeClass('active'); 
         $content.hide(); 

         // Update the variables with the new link and content 
         $active = $(this); 
         $content = $($(this).attr('href')); 

         // Make the tab active. 
         $active.addClass('active'); 
         $content.show(); 

         // Prevent the anchor's default click action 
         e.preventDefault(); 
        }); 
       }); 
      }); 
     </script> 

:

이것은가 탭 선택을위한 스크립트입니다 : 많은 데이터가있을 것이기 때문에, 나는 탭에서만 정보 (가) 포함을 표시하고 32 파괴/클릭 탭 이외 비워 싶습니다

이것은 탭의 thml입니다. 홈 탭을 클릭하면 홈 탭의 데이터가 표시되어야합니다. 나는 다른 divs에있는 모든 다른 데이터를 eptied하거나 파괴해야합니다. 어떻게하면 좋을까요?

<ul class='tabs'> 
    <li><a href='#tab1'>HOME</a></li> 
    <li><a href='#tab2'>it</a></li> 
    <li><a href='#tab3'>markting</a></li> 
    <li><a href='#tab4'>finance</a></li> 
    <li><a href='#tab5'>accounting</a></li> 
    <li><a href='#tab6'>pr</a></li> 
    </ul> 
    <div id='tab1'> 
    <div id="container"> 
    <table align="center"> 
      <tr> 
       <td><div id="web1_cpu" class="chart" style="width:500px; height:250px;"></div></td> 
       <td><div id="web2_cpu" class="chart" style="width:500px; height:250px;"></div></td> 

      </tr> 
      </table> 
      <table align="center"> 

      <tr>  
       <td><div id="site1_cpu" class="chart" style="width:500px; height:250px;"></div></td> 
       <td><div id="site2_cpu" class="chart" style="width:500px; height:250px;"></div></td> 

      </tr> 
     </table> 
     <table align="center"> 

      <tr>  
       <td><div id="app1_cpu" class="chart" style="width:500px; height:250px;"></div></td> 
       <td><div id="app2_cpu" class="chart" style="width:500px; height:250px;"></div></td> 

      </tr> 
     </table> 
      </div> 

    </div> 

Answer 1

내 생각 엔 당신이 hide()하지만 html('')을 원하지 않는다는 것입니다. (공백 값을 나타내는 따옴표에 유의하십시오.) 그러면 요소의 모든 내용이 제거됩니다.

http://api.jquery.com/html/#html2

메모리에서 노드를 제거에 대한 자세한 내용은이 질문을 참조하십시오 : 정확히 그 일의 요점은 무엇 Remove HTML element (DOM Node) from memory