1

I'm currently working on a little project and I did this tutorial on a 'dynamic tabbed box' which i fill with list items dynamically form a db. and its all worked fine, thats because the tutorial used 6 tabs and i used 6 tabs! but on a different page I've implemented it on, I need 8 tabs. These last 2 tabs now appear under the first tab when the page is originally loaded! when you select 'tab b' then go back to the first tab it only shows the content i want on there, but like i said when you originally load the page, the last 2 tabs appear under the content that should be on 'tab a'... my code for the tabbed box is ... 

<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>

the code i have included for the jquery is ...

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';      

}

in the jquery, the 2 extra ('tab_7') & ('tab_8') parts to it all i are the things ive added, ive tried finding the original tutorial but i cant find it to resort back to for advice or anything so is there someone that can help and advise?

4

1 回答 1

0

抱歉，我发现答案在 css 中，我确定我检查过了，但我必须找到需要更改的类似名称的部分。css 中的#content_x 是 display:none; 隐藏它们直到点击！

于 2013-07-03T09:12:53.717 回答