带有blueprintcss意外结果和失败的jquery选项卡

Question

使用jquery的几个查询...

我正在尝试创建一个选项卡式面板，最初我尝试使用jquery选项卡ui，但无法将其与blueprint一起使用。每当我在窗格中使用“span-xx”类时，整个结构似乎都会断开，窗格出现在选项卡区域之外。

如果正在挖掘，我发现了他们网站上的蓝图示例，所以我开始使用这种方法。jquery代码出现在页脚，我理解这是为了让它在页面加载后运行？我试着把它移到顶端，但没有，joy。我也把它放在一个document.ready中，但是仍然没有，joy -我应该担心这个还是不管它？为什么它不能在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>

我的主要问题是，当我将鼠标放在标签上时，它会显示面板的大部分时间，但在其他情况下，我可能会得到同一面板或其他面板的多个实例。为什么是ANy原因？

摘要:有没有办法让blueprint在jquery选项卡用户界面上表现得很好？为什么代码在页面底部，我可以让它从顶部开始工作吗？为什么我会得到窗格的多个实例？

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