1

私は現在、小さなプロジェクトに取り組んでおり、データベースを動的に形成するリスト項目を入力する「動的タブ付きボックス」でこのチュートリアルを行いました。チュートリアルでは6つのタブを使用し、私は6つのタブを使用したため、すべて正常に機能しました! しかし、私が実装した別のページでは、8 つのタブが必要です。これらの最後の 2 つのタブは、ページが最初に読み込まれたときに最初のタブの下に表示されるようになりました! 「タブ b」を選択してから最初のタブに戻ると、必要なコンテンツのみが表示されますが、ページを最初にロードしたときに述べたように、「タブ a」にあるはずのコンテンツの下に最後の 2 つのタブが表示されます'... タブ付きボックスのコードは ... 

<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') 部分がすべて私が追加したもので、元のチュートリアルを見つけようとしましたが、アドバイスや何かのために頼るのにそれを見つけることができません。助けてアドバイスできる人はいますか？

4

1 に答える 1

0

申し訳ありませんが、回答がcss内にあることがわかりました。確認したことは確かでしたが、変更が必要な名前の似た部分が必要です。css の #content_x は display:none; です。クリックするまでそれらを隠します！

于 2013-07-03T09:12:53.717 に答える