带有蓝图的Jquery选项卡包含意想不到的结果和失败

Question

两个jquery查询…

我试图创建一个选项卡面板，最初我尝试使用jquery选项卡ui，但无法让它与蓝图存在。每当我在窗格中使用'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>

Thanks for the help

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>