显示不需要的扩展数据的选项卡框

我目前正在做一个小项目，我在一个"动态选项卡框"上完成了本教程，我用列表项动态填充该框以形成数据库。这一切都很好，那是因为教程使用了6个选项卡，而我使用了六个选项卡！但在我实现的另一个页面上，我需要8个选项卡。当最初加载页面时，最后两个选项卡现在显示在第一个选项卡下面！当你选择"选项卡b"然后返回到第一个选项卡时，它只显示我想要的内容，但就像我最初加载页面时所说的那样，最后两个选项卡出现在应该在"选项卡a"上的内容下面。。。我的选项卡框代码是。。。

<ul class="tabs">  
    <li><a href="#ATP_Singles"   title="content_1" class="tab active">ATP Singles</a></li>  
    <li><a href="#ATP_Doubles"   title="content_2" class="tab">ATP Doubles</a></li>  
    <li><a href="#WTA_Singles"   title="content_3" class="tab">WTA Singles</a></li>
    <li><a href="#WTA_Doubles"   title="content_4" class="tab">WTA Doubles</a></li>
    <li><a href="#ITF_Boys"      title="content_5" class="tab">ITF Boys</a></li>
    <li><a href="#ITF_Girls"     title="content_6" class="tab">ITF Girls</a></li>
    <?php if (logged_in()){
    ?>
    <li><a href="#add"           title="content_7" class="tab">Add</a></li>
    <li><a href="#update"        title="content_8" class="tab">Update</a></li>
    <?php
}
    ?>
</ul>

<div id="content_1"  class="content"><?php include 'includes/tennis/atp_singles.php'; ?></div>  
<div id="content_2"  class="content"><?php include 'includes/tennis/atp_doubles.php'; ?></div>  
<div id="content_3"  class="content"><?php include 'includes/tennis/wta_singles.php'; ?></div>  
<div id="content_4"  class="content"><?php include 'includes/tennis/wta_doubles.php'; ?></div>  
<div id="content_5"  class="content"><?php include 'includes/tennis/itf_boys.php'; ?></div>  
<div id="content_6"  class="content"><?php include 'includes/tennis/itf_girls.php'; ?></div>
<?php if (logged_in()){
?>
<div id="content_7"  class="content"><?php include 'includes/tennis/add.php'; ?></div>
<div id="content_8"  class="content"><?php include 'includes/tennis/update.php'; ?></div>
<?php
} ?>   
</div> 

我为jquery包含的代码是。。。

function tabSwitch(new_tab, new_content) {  
document.getElementById('content_1').style.display = 'none';  
document.getElementById('content_2').style.display = 'none';  
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';  
document.getElementById('content_5').style.display = 'none';  
document.getElementById('content_6').style.display = 'none';
document.getElementById('content_7').style.display = 'none';  
document.getElementById('content_8').style.display = 'none';           
document.getElementById(new_content).style.display = 'block';     

document.getElementById('tab_1').className = '';  
document.getElementById('tab_2').className = '';  
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';  
document.getElementById('tab_5').className = '';  
document.getElementById('tab_6').className = '';
document.getElementById('tab_7').className = '';  
document.getElementById('tab_8').className = '';         
document.getElementById(new_tab).className = 'active';        
}  
function tabSwitch_2(active, number, tab_prefix, content_prefix) {  
for (var i=1; i < number+1; i++) {  
  document.getElementById(content_prefix+i).style.display = 'none';  
  document.getElementById(tab_prefix+i).className = '';  
}  
document.getElementById(content_prefix+active).style.display = 'block';  
document.getElementById(tab_prefix+active).className = 'active';      
}

在jquery中，2个额外的（'tab_7'）&（‘tab_8’）我是我添加的东西吗？我试着找到最初的教程，但我找不到它来寻求建议或其他什么，所以有人可以提供帮助和建议吗？