JS里面的手风琴标签菜单没有加载

Question

谢谢大家和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; }