JQuery вкладка с blueprintcss неожиданных результатами и неудачи

Question

несколько запросов с JQuery ...

Я пытаюсь создать панель с закладками, сначала я попытался с помощью JQuery вкладки пользовательского интерфейса, но не мог заставить его существовать с планом , Всякий раз, когда я использовал класс «span-xx» внутри панели, вся структура, казалось, ломалась, и панели отображались вне области вкладок.

Немного, если копать, и я нашел пример чертежа со своего сайта, поэтому ему пришлось работать над этим методом. Код jquery появился в нижнем колонтитуле, и я понимаю, что он запускается после загрузки страницы. Я попытался переместить его на вершину, но без радости. Я также помещаю его в документ. Уже, но все равно, нет радости - я должен беспокоиться об этом или оставить его в покое? Почему это не работает внутри документа.

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