Javascript JS内手风琴选项卡菜单未加载

谢谢你们和stackoverflow的支持

我有一个手风琴标签菜单。我的每个选项卡都有类似折线图、条形图、饼图等的图表。我已经在html的头部部分包含了图表的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>

#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; }