jQuery的卡口與blueprintcss意想不到的結果和失敗

Question

一對夫婦使用jQuery查詢...

我試圖創建一個標籤面板，起初我嘗試使用jQuery UI的標籤，但不能讓它與藍圖存在。每當我在窗格中使用'span-xx'類時，整個結構似乎都會斷裂，並且窗格出現在選項卡區域之外。

有點挖掘，我發現他們的網站的藍圖示例，所以得到了該方法的工作。 jquery代碼出現在頁腳，我明白這是它在頁面加載後運行的嗎？我試圖把它移到頂端，但沒有喜悅。我也把它放在一個文檔中，但仍然沒有喜樂 - 我應該擔心這個還是放棄它？爲什麼它不能在document.ready中工作？

<script type="text/javascript"> 
     $("ul.tabs li.label").hide(); 
     $("#tab-set > div").hide(); 
     $("#tab-set > div").eq(0).show(); 


     $("ul.tabs a").bind('click hover', 

    function() { 
     $("ul.tabs a.selected").removeClass('selected'); 
     $("#tab-set > div").hide(); 
     $(""+$(this).attr("href")).fadeIn('slow'); 
     $(this).addClass('selected'); 
     return false; 
    } 
); 

    $("#toggle-label").click(function() { 
    $(".tabs li.label").toggle(); 
    return false; 
    }); 
    </script> 

我的主要問題，但是，當我將鼠標放置在標籤中，將顯示面板次數最多的，但在其他場合，我可以得到相同的面板的多個實例，或滿足其他面板。任何原因爲什麼？

摘要： 有沒有辦法讓藍圖玩jquery tabs ui？ 爲什麼在頁面底部的代碼，我可以讓它從頂部工作？ 爲什麼我會獲取窗格的多個實例？

<div id="tab-set" class="span-18 append-1"> 
     <ul class="tabs"> 
     <li><a href="#panel-1" class="selected">Full Membership</a></li> 
     <li><a href="#panel-2">Associate</a></li> 
     <li><a href="#panel-3">Cadets</a></li> 
     <li><a href="#panel-4">Juniors</a></li> 
     <li><a href="#panel-5">Corporate</a></li> 
     <li><a href="#panel-6">Hotels</a></li> 
     </ul> 
<div id="panel-1>Content 1</div> 
<div id="panel-2>Content 2</div> 
    etc... 
</div> 

感謝您的幫助

Answer 1

我想是因爲你的動畫還沒有準備好。試試這個：

<script type="text/javascript"> 
    $("ul.tabs li.label").hide(); 
    $("#tab-set > div").hide(); 
    $("#tab-set > div").eq(0).show(); 


    $("ul.tabs a").bind('click hover', 

function() { 
    $("ul.tabs a.selected").removeClass('selected'); 
    $("#tab-set > div").stop(true, false).hide(); // This stops the animation 
    $(""+$(this).attr("href")).fadeIn('slow'); 
    $(this).addClass('selected'); 
    return false; 
} 
); 

$("#toggle-label").click(function() { 
    $(".tabs li.label").toggle(); 
    return false; 
}); 
</script>