jquery選項卡 - 我做錯了什麼？

HTML代碼：jquery選項卡 - 我做錯了什麼？

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

以上代碼有兩個選項卡，我使用jQuery顯示上單擊標籤。但是，當我點擊任何選項卡。該選項卡內的元素不顯示。難道我做錯了什麼？

來源

2011-07-21 Gurnor

爲什麼不使用jqueryui呢？ http://jqueryui.com/demos/tabs/ – Matt

我試過了。這對我來說太複雜了。不瞭解如何使用。 – Gurnor

它很容易使用，然後嘗試自己構建它。 $（「#questions」）.tabs（）;它完成了。您的html與默認情況下創建選項卡所需的類似。如果你到了我向你展示的頁面，通過點擊查看源代碼來查看源代碼。 – Matt

當你說的jQuery（ '＃DIV問題'）隱藏（）或顯示（），它會隱藏所有div內#questions格。請嘗試下面的代碼，它會爲你工作。

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

來源

2011-07-21 23:43:30 ShankarSangoli

@Gurnor - 如果你不想使用jquery UI選項卡，請使用它，它一定會爲你工作。 – ShankarSangoli

所有這些問題的div是未關閉..關閉它們，然後你的代碼工作

你的代碼工作對我來說...爲什麼你認爲它不？這裏有一個你可以看到的jsfiddle。當你點擊一個鏈接時，出現不同的選項卡。

使用這個HTML地看到，它的工作原理與您當前的JavaScript

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

來源

2011-07-21 23:37:14 mazlix

您的標記將工作，因爲沒有嵌套div與fly/fly1 div。當我們說$（「div div」）。hide（）時，它會隱藏所有的div甚至是嵌套的div，這就是爲什麼什麼都不可見。我們應該說使用$（「questions> div」）隱藏直接的孩子。hide（） – ShankarSangoli

你正在做的很多事情錯。

演示的jQuery用戶界面標籤：http://jsfiddle.net/Qj23q/

來源

2011-07-21 23:42:25 naveen

jquery選項卡 - 我做錯了什麼？

回答

相關問題