Question

我有一个标签导航，其第二个标签包含一个jqplot图表。

我的目标：

在第二个标签中显示图表。
使用图表在打印视图中显示两个选项卡。

我的代码来了：

HTML：

<nav>
    <ul>
        <li><a class="tablink" title="box-tab1" href="#">Tab 1</a></li>
        <li><a class="tablink" title="box-tab2" href="#">Tab 2</a></li>
    </ul>
</nav>

<br><br><br>

<div id="tabcon">
    <div class="tabbox" id="box-tab1"><p>Tab 1</p></div>
    <div class="tabbox" id="box-tab2"> <div id="chart"></div></div>
</div>

CSS：

.tabbox {
    display: none;
}

#box-tab1 {
    display: block;
}

JS：

var plot1 = $.jqplot ('chart', [[3,7,9,1,4,6,8,2,5]]);

 $('.tablink').click(function (e) {
                    var tabtitle = $(this).attr('title');
                    $('.tabbox').hide();
                    $('#' + tabtitle).show();

                    if (tabtitle == 'box-tab2') {
                        plot1.replot();
                    }

                    e.preventDefault();
 });

JSFIDDLE： http://jsfiddle.net/yGLmT/69/

我如何实现我的两个目标？

Answer 1

一般来说，你应该使用这里提到的技术：

http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

但是如果您使用Bootstrap 3，则事件的名称与上述文档的名称不同;正确的是在这里：

http://getbootstrap.com/javascript/#tabs-events

jqplot：使图表显示在选项卡导航+打印视图中

1 个答案: