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>

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

<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

如何清空非活动标签中的数据？

1 个答案: