Question

我需要有选项卡，当单击选项卡时，我需要能够执行jquery脚本来填充每个选项卡中的div。当我切换到其他选项卡时，其他选项卡数据应显示在div上。我有这个脚本来隐藏和显示活动选项卡的数据：

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

这是html：

<ul class='tabs'>
    <li><a  href='#tab1'>SITEPERFORMANCE</a></li>
    <li><a  href='#tab2'>DB</a></li>
    <li><a  href='#tab3'>WEB</a></li>


  <div id="tab2">
    <div id="container">
        <table align="center">
            <tr>

                <td>
                    <div class="zoom_controls">
                          <div class="zoom_controls">
                              <a class="DB" id="prof_cpu_d" href="#" data-chart="line" data-range="1m">Real Time</a>
                              <a class="DB" id="prof_cpu_w"href="#" data-chart="line" data-range="3m">Weekly</a>
                              <a class="DB" id="prof_cpu_m" href="#" data-chart="line" data-range="6m">Monthly</a>
                              <a class="DB" id="prof_cpu_f"href="#" data-chart="line" data-range="All">Forecast</a>
                        </div>
                    </div>
                    <div id="container_cpu" style="width:700px; height:300px;"></div></td>  
            </tr>
        </table>    
        <br>
        <table align="center">
            <tr>

                <td>
                    <div class="zoom_controls">
                          <div class="zoom_controls">
                              <a class="DB" id="prof_pc_d" href="#" data-chart="line" data-range="1m">Real Time</a>
                              <a class="DB" id="prof_pc_w"href="#" data-chart="line" data-range="3m">Weekly</a>
                              <a class="DB" id="prof_pc_m" href="#" data-chart="line" data-range="6m">Monthly</a>
                              <a class="DB" id="prof_pc_f"href="#" data-chart="line" data-range="All">Forecast</a>
                        </div>
                    </div>
                    <div id="container_pc" style="width:700px; height:300px;"></div></td>   
            </tr>
        </table>    
        <br>
        <table align="center">
            <tr>

                <td>
                    <div class="zoom_controls">
                          <div class="zoom_controls">
                              <a class="DB" id="prof_mem_d" href="#" data-chart="line" data-range="1m">Real Time</a>
                              <a class="DB" id="prof_mem_w"href="#" data-chart="line" data-range="3m">Weekly</a>
                              <a class="DB" id="prof_mem_m" href="#" data-chart="line" data-range="6m">Monthly</a>
                              <a class="DB" id="prof_mem_f"href="#" data-chart="line" data-range="All">Forecast</a>
                        </div>
                    </div>
                    <div id="container_memory" style="width:700px; height:300px;"></div></td>   
            </tr>
        </table>
        </div>
</div>

我还有这个小jquery来执行一些函数并在单击选项卡时加载div：

$("#tab2").click(function () {
    db_cpu();
    db_pc();
    db_memory();
});

db_cpu（），db_pc（），db_memory（）函数可以创建图表并填充相应的div（这些函数可以正常工作）。

当我点击tab2时，我没有填充div。但是当点击像prof_cpu_d这样的内部div时，它可以工作。当我点击标签时，我需要填充div。知道如何在tab2上点击db_cpu，db_pc和db_memory吗？

如果我点击页面正文中的任何位置，div加载？这是否与任何缓存有关？有没有办法在单击选项卡div时强制第一次加载？

这是标签的css：

.tabs li {
                                    list-style:none;
                                    display:inline;
                                }

                            .tabs a {
                                    padding:5px 10px;
                                    display:inline-block;
                                    background:#C0C0C0;
                                    color:#000;
                                    text-decoration:none;
                                    text-align: center;
                                    font: 18px sans serif;
                                    font-weight: bold;

                                }

                            .tabs a.active {
                                    background:#6E6EFF;
                                    color:#fff;
                                }

Answer 1

尝试以下操作：更改

<li><a  href='#tab1'>SITEPERFORMANCE</a></li>
<li><a  href='#tab2'>DB</a></li>
<li><a  href='#tab3'>WEB</a></li>

到

<li id='anchor_tab1'>SITEPERFORMANCE</li>
<li id='anchor_tab2'>DB</li>
<li id='anchor_tab3'>WEB</li>

并使用

访问该功能

$('#anchor_tabX').click(...);

你可以发布用于隐藏和显示标签的css吗？

Answer 2

这有效：

$("a[href=#tab2]").click(function() {
functions()
});

单击选项卡执行Javascript函数以填充div不起作用

2 个答案: