0

我正在使用 jquery 来构建一个选项卡。我可以在选项卡之间来回切换，并根据我单击的选项卡显示/隐藏内容。

真正需要的是根据单击的选项卡，我需要为每个选项卡调用不同的 javascript。我不想在页面加载时加载所有的 javascirpts。我正在使用 highcharts 来构建图表，这些图表可能非常重。我不想在页面加载时加载所有这些 javascript。我需要根据要单击的选项卡加载 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>

这是一个示例 highchart javascript，用于创建图表并将其绑定到 div

<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });

//$(function() {
function cdc1_web_cpu() {

var  timeout;
    $.getJSON('cdc1_web_cpu.php', function(data) {

        // Create a timer

        // Create the chart


    $('#web1_cpu').highcharts('StockChart', {
            chart: {
                borderColor: '#801500',
                borderRadius: 20,
                borderWidth: 1,
                type: 'line',
                events: {
                    load: function(chart) {
                        this.setTitle(null, {

                        });
                    }
                },
                zoomType: 'x'
                                }
                       )};
                   )};

这是html 

<ul class='tabs'>
   <li><a href='#tab1'>HOME</a></li>
   <li><a href='#tab2'>APPS</a></li>
</ul>
<div id='tab1'>
   <div id="container">
      <table align="center">
      <tr>
         <td>
            <div id="web1_cpu" class="chart" style="width:550px; height:250px;"></div>
         </td>
      </tr>
   </div>
</div>
<div id='tab2'>
   <div id="container">
      <table align="center">
      <tr>
         <td>
            <div id="app_cpu" class="chart" style="width:550px; height:250px;"></div>
         </td>
      </tr>
   </div>
</div>
4

1 回答 1

1

评论似乎已经涵盖了答案，但为了澄清，请使用以下 Javascript：

function yeSawgHohgothNektu() {
  // Execute a labyrinthine mammoth of 80 KB of complicated calculation code to summon
  // SawgHogoth, the dark lord of Javascript code, and destroy the user's processor.
}

...只有在实际调用该功能时才会发生这种情况。对于大多数浏览器来说，加载一个 80KB 文件并解析其内容所花费的时间通常非常少。正如一位评论者所说，如果您真的想尽可能优化时间，请使用 AMD。它需要在另一端专门定义，但这是之后的调用方式。

function onClickedBeginSummoning() {
  // user has initiated the summoning ritual
  require(['libraries/forbiddenhall/yeSawgHogothNektu'], function(ye) {
    // libraries/forbiddenhall are directories containing JS files
    ye();
  });
}
于 2013-07-25T20:55:13.407 回答