Javascript 海图及；引导：选项卡2上的图表未出现。尽管第一张图表运行良好

我正在制作海图。我还使用了标签的引导。我有两个图表，每个图表都要显示在不同的选项卡中。不知何故，我在第一个选项卡中得到了正确的第一个图表。但第二个选项卡是空的。请在下面找到我的代码

HTML

<div class="container">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#home">Quarterly</a></li>
          <li><a data-toggle="tab" href="#menu1">Waterline</a></li>
        </ul>

        <div class="tab-content">
          <div id="home" class="tab-pane fade in active">
            <br/><br/>
            <select id="dropdown">
              <option>Portfolio</option>
            </select>
            <br/><br/><br/>
            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
          </div>
          <div id="menu1" class="tab-pane fade">
            <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
          </div>
        </div>
      </div>

<div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">Chart 1</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Chart 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="one" >
                            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>

                        <div class="tab-pane" id="two" >
                          <br/><br/><br/>
                          <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>
                    </div> 
            </div>
        </div>
    </div>

另外，如果你能看到我也给了警告信息。它根本没有运行？虽然第一个选项卡工作正常

请建议。蒂亚

---

已解决：从这里开始：

问题是，当您在选项卡内部单击时，会触发单击事件，它本身

如果在选项卡导航栏上单击时希望图表回流，则需要为元素添加单击事件侦听器

$("a[href='#home']).click(function() {
     $('#left').highcharts().reflow();
});

$("a[href='#menu1']).click(function() {
     $('#right').highcharts().reflow();
});

因为当引导呈现选项卡时，它将为选项卡创建导航栏。。。查看这张图片的html结果

---

你的问题在于你的点击处理程序；当您单击选项卡主体而不是选项卡本身时，它们被配置为。因此，如果您单击选项卡2上的空白区域，您将收到警报

在我看来，有两个简单的解决方案可以解决这个问题

解决方案1 更新标签，使其具有Id，并适当更新JavaScript点击处理程序

HTML

解决方案2

使用使用逻辑确定如何处理选项卡的单击处理程序

HTML

---

我认为解决方案2更好，因为它允许您拥有一个可以处理所有选项卡的jquery函数。它只需要您的UL上有一个Id，每个选项卡上有一个数据属性。

我已经找到了我上面所问问题的答案。请在下面找到解决方案：

CSS

$('#home').click(function () {
        alert("left");
        $('#left').highcharts().reflow();
      });
      $('#menu1').click(function () {
        alert("right");
        $('#right').highcharts().reflow();
});

<style type="text/css">
      .tab-content .tab-pane .highcharts-container {
          border: 0px;
      }

      .tab-content > .tab-pane {
        display: block;
        height: 0;
        overflow-y: hidden;
      }

    .tab-content > .active {
        height: auto;
    }

    .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:active {
        outline:none;
    }
    </style>
    <style type="text/css">
      #left, #right{
        float: left;
    }
    </style>

$('#left').highcharts({
              chart: {
                  type: 'column'
              },
              title: {
                  text: 'Some Title'
              },
              xAxis: {
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: ''
                  }
              }, // Like this further inputs for Highcharts.

注意：以上highchart代码仅用于演示，不完整

---

我希望这个解决方案会有所帮助。感谢大家抽出时间。

我想几周前我在引导选项卡上遇到了类似的问题，因为引导阻止了点击事件的正确传播，所以我不得不手动显示和隐藏选项卡。你能解释一下你是如何做到的吗？那太好了！！您是否尝试在相关主题中调用setSize like:/All，谢谢，问题已解决。在此处获取更多详细信息：如果您的问题已解决，请将解决方案作为答案发布，并接受它作为答案。

$('#myTabs a').click(function(e) {
  e.preventDefault();
  $("#" + e.target.dataset.tableid)).highcharts().reflow();
  $(this).tab('show');
});

<style type="text/css">
      .tab-content .tab-pane .highcharts-container {
          border: 0px;
      }

      .tab-content > .tab-pane {
        display: block;
        height: 0;
        overflow-y: hidden;
      }

    .tab-content > .active {
        height: auto;
    }

    .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:active {
        outline:none;
    }
    </style>
    <style type="text/css">
      #left, #right{
        float: left;
    }
    </style>

<div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">Chart 1</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Chart 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="one" >
                            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>

                        <div class="tab-pane" id="two" >
                          <br/><br/><br/>
                          <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>
                    </div> 
            </div>
        </div>
    </div>

$('#left').highcharts({
              chart: {
                  type: 'column'
              },
              title: {
                  text: 'Some Title'
              },
              xAxis: {
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: ''
                  }
              }, // Like this further inputs for Highcharts.