2013-07-03 39 views
1

我目前正在研究一個小項目,並且我在「動態選項卡式框」上做了這個教程,我動態地使用列表項來填充數據庫。它的一切運行良好,這是因爲該教程使用了6個標籤,我使用了6個標籤!但在我實現它的另一頁上,我需要8個選項卡。當頁面最初加載時,最後2個選項卡現在出現在第一個選項卡下面!當你選擇'tab b'時,回到第一個標籤,它只顯示我想要的內容,但正如我在最初加載頁面時所說的那樣,最後2個標籤出現在應該在'標籤頁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('t ab_7')&('tab_8')部分它全部我 是添加的事情,我試圖找到原始教程,但我無法找到它訴諸建議或任何東西,所以有人可以幫助和建議?

回答

0

對不起,我發現答案是在CSS內,我確定我檢查過,但我必須找到類似的部件,需要更改。 CSS中的#content_x是display:none;隱藏它們直到點擊!

相關問題