jquery tabs - 何が間違っているのですか？

Question

のHTMLコードは次のとおりです。

<div id="questions"> 
    <ul> 
     <li class="selected"><a href="#fly">Fly</a></li> 
     <li><a href="#fly1">Fly 1</a></li> 
    </ul> 

<div id="fly" style="display: block;"> 
    <div id="question141"> 
    <div id="question104"> 
    <div id="question80"> 
    <div id="question79"> 
</div> 
<div id="fly1"> 
    <div id="question141"> 
    <div id="question104"> 
    <div id="question80" > 
    <div id="question79" > 
</div> 
</div> 

のjQuery：

<script> 
jQuery(document).ready(function(){ 
    jQuery('#questions div').hide(); 
    jQuery('#questions div:first').show(); 
    jQuery('#questions ul li:first').addClass('active'); 

    jQuery('#questions ul li a').click(function(){ 
     jQuery('#questions ul li').removeClass('active'); 
     jQuery(this).parent().addClass('active'); 
     var currentTab = jQuery(this).attr('href'); 
     jQuery('#questions div').hide(); 
     jQuery(currentTab).show(); 
     return false; 
    }); 
}); 
</script> 

コード上記の2つのタブがあり、私はクリックでタブを表示するためにはjQueryを使用しています。しかし、私は任意のタブをクリックします。タブ内の要素は表示されません。何か間違っているのですか？

Answer 1

あなたがjQueryの（ '＃の質問のdiv'）と言う非表示（）またはshow（）それはすべてのdivに内部#questions div要素を非表示になります。以下のコードを試してみてください。

<script> 
jQuery(document).ready(function(){ 
    jQuery('#questions > div').hide(); 
    jQuery('#questions div:first').show(); 
    jQuery('#questions ul li:first').addClass('active'); 

    jQuery('#questions ul li a').click(function(){ 
     jQuery('#questions ul li').removeClass('active'); 
     jQuery(this).parent().addClass('active'); 
     var currentTab = jQuery(this).attr('href'); 
     jQuery('#questions > div').hide(); 
     jQuery(currentTab).show(); 
     return false; 
    }); 
}); 
</script> 

Answer 2

のdivが閉じていない..ですそれらを閉じた後、あなたのコードは

あなたのコードは、私の作品作品のすべてのこれらの問題...なぜあなたはそれがdoesntのだと思いますか？ここにあなたが見ることができるjsfiddleがあります。リンクをクリックすると、さまざまなタブが表示されます。それはあなたが多くのことをやっている間違っ

<div id="questions"> 
    <ul> 
     <li class="selected"><a href="#fly">Fly</a></li> 
     <li><a href="#fly1">Fly 1</a></li> 
    </ul> 

<div id="fly" style="display: block;"> 
fly........ 
</div> 
<div id="fly1"> 
    fly1 
</div> 
</div> 

Answer 3

現在JavaScriptを使用して動作することを確認するために

使用このHTML。

のjQuery UIのタブ上のデモ：。http://jsfiddle.net/Qj23q/