0

我正在构建一个仪表板，它将有很多 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>

这是标签的 thml。当我单击主页选项卡时，需要显示主页选项卡中的数据。我需要删除或销毁任何其他 div 中的所有其他数据。我该怎么做？

<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>
4

1 回答 1

1

我的猜测是你不想要hide()，但是html('')。（注意引号，表示一个空值。）这将删除元素的所有内容。

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

有关从内存中删除节点的更多信息，请参阅此问题：Remove HTML element (DOM Node) from memory

于 2013-07-12T20:38:06.230 回答