0

谢谢你们和stackoverflow的支持。

我有一个手风琴标签菜单。每个选项卡都有图表，如折线图、条形图、饼图等。我已经在 html 的 head 部分包含了图表的 js。当页面加载仅显示默认打开选项卡上的图表时，单击其他选项卡时，仅显示 html 和 php 内容，但不显示图表。

这意味着，js 没有加载到隐藏的选项卡中。请让我知道我是否必须在隐藏的选项卡上编写任何脚本才能显示图表。

选项卡式代码

<div id="page-wrap">


      <div id="example-one">

            <ul class="nav">
                <li class="nav-one"><a href="#featured" class="current">Bar Chart</a></li>
                <li class="nav-two"><a href="#core">Line Chart</a></li>
                <li class="nav-three"><a href="#jquerytuts">Area Chart</a></li>
                <li class="nav-four last"><a href="#classics">Pie Chart</a></li>
            </ul>

            <div class="list-wrap">

                <ul id="featured">
                    <li>
<div id="jQueryBarChart"></div>
<br />
<table id="barchart" class="hovertable" width="830px" style="margin-left:30px;">
<caption>2010 Employee Sales by Department</caption>
    <thead>
        <tr>
            <td></td>
            <?php 
            for($a=1; $a<=$totalsub1; $a++)
            {
            ?>
            <th scope="col"><?php echo ${s1sub.$a}; ?></th>
            <?php } ?>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <?php 
            for($a=1; $a<=$totalsub1; $a++)
            {
            ?>
            <td><?php echo ${s1mar.$a}; ?></td>
            <?php 
            }
            ?>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <?php 
            for($a=1; $a<=$totalsub1; $a++)
            {
            ?>
            <td><?php echo ${s2mar.$a}; ?></td>
            <?php 
            }
            ?>
        </tr>   
    </tbody>
</table> 
                    </li>
                </ul>

                 <ul id="core" class="hide">
                   <li>


<div id="jQueryLineChart"></div>
<br />
<table id="linechart" class="hovertable" width="830px" style="margin-left:30px;">
<caption>2010 Employee Sales by Department</caption>
    <thead>
        <tr>
            <td></td>
            <?php 
            for($a=1; $a<=$totalsub1; $a++)
            {
            ?>
            <th scope="col"><?php echo ${s1sub.$a}; ?></th>
            <?php } ?>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <?php 
            for($a=1; $a<=$totalsub1; $a++)
            {
            ?>
            <td><?php echo ${s1mar.$a}; ?></td>
            <?php 
            }
            ?>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <?php 
            for($a=1; $a<=$totalsub1; $a++)
            {
            ?>
            <td><?php echo ${s2mar.$a}; ?></td>
            <?php 
            }
            ?>
        </tr>   
    </tbody>
</table>                   




                   </li>
                 </ul>

 </div> <!-- END List Wrap -->

         </div> 
        <!-- END Organic Tabs (Example One) -->

标头代码

<script type="text/javascript"> 
$(function() {
         $("#example-one").organicTabs();
});

$(function(){
         $('#barchart').visualize({type: 'bar', height: '260px', width: '750px', appendTitle : true, lineWeight : 4, colors : ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']}).appendTo('#jQueryBarChart').trigger('visualizeRefresh');

        });


$(function(){
         $('#linechart').visualize({type: 'line', height: '300px', width: '750px', appendTitle : true, lineWeight : 4, colors : ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']}).appendTo('#jQueryLineChart').trigger('visualizeRefresh');

        });

</script>

选项卡式菜单的 CSS

#page-wrap { width: 100%;}

/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }


/* Specific to example one */

#example-one { padding: 10px 45px 10px 10px; margin: 0 0 0 0;  -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover { background: #fe4902; color: white; }
#example-one ul li:last-child a { border: none; }

#example-one ul li.nav-one a.current, #example-one ul.featured li a:hover { background-color: #0575f4; color: white; }
#example-one ul li.nav-two a.current, #example-one ul.core li a:hover { background-color: #d30000; color: white; }
#example-one ul li.nav-three a.current, #example-one ul.jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#example-one ul li.nav-four a.current, #example-one ul.classics li a:hover { background-color: #FE4902; color: white; }
4

0 回答 0