JQuery вкладки с BlueprintCSS неожиданные результаты и сбои - PullRequest
Новая
       9

JQuery вкладки с BlueprintCSS неожиданные результаты и сбои

0 голосов
/ 16 декабря 2011

пара запросов с jquery ...

Я пытаюсь создать панель с вкладками, изначально я пытался использовать интерфейс jquery tabs, но не смог создать ее с помощью blueprint.Всякий раз, когда я использовал класс 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 tabs?Почему код внизу страницы и можно ли заставить его работать сверху?Почему я получаю несколько экземпляров панелей? 

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

Спасибо за помощь

1 Ответ

1 голос
/ 16 декабря 2011

Я думаю, потому что ваша анимация еще не готова.попробуйте это: 

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