Question

我目前正在开展一个小项目，我在“动态选项卡框”上完成了本教程，我将动态地从db填充列表项。它的工作正常，那是因为教程使用了6个标签，我使用了6个标签！但是在另一个页面上我实现了它，我需要8个标签。最初加载页面时，最后两个选项卡现在显示在第一个选项卡下！当你选择'tab b'然后回到第一个标签时它只显示我想要的内容，但就像我说你最初加载页面时，最后2个标签出现在应该在'tab 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'）＆amp; （'tab_8'）部分全部我是我添加的东西，香港专业教育学院尝试找到原始的教程，但我不能找到它回去寻求建议或任何事情，那么是否有人可以提供帮助和建议？

Answer 1

对不起，我发现答案是在css内，我确定我已经检查但是我必须将类似的部分命名为需要更改。 css中的#content_x是display：none;隐藏它们直到被点击！

标签框显示不需要的扩展数据

1 个答案: