jquery UI 选项卡充当链接而不是选项卡

Question

我正在开发一个 Ruby on Rails 应用程序，我试图让页面的左侧基本上由两个选项卡控制。我希望每次单击它们时在两个选项卡之间交换内容……只是典型的选项卡行为。我正在使用 jQuery-ui-tabs。现在，我设置了两个选项卡都可以单击并链接到 div 的位置，但是当我加载页面时，两个 div 最初呈现，彼此重叠，然后单击选项卡将我带到页面上的位置每个 div 开始而不是页面停留在同一个地方和内容切换。这似乎不应该那么难，但我已经花了很长时间感到非常沮丧，所以我希望/感谢任何帮助！

我编写了一个局部视图，其中包含选项卡和“链接”，并将它们定向到呈现不同视图的 div。

<div id="tabs">
    <a href="#first">
        <div class="tab">
            <div class="icon">
                <%= image_tag "buddies.png", :class => "icon img b" %>
            </div>
            first tab
         </div>
     </a>
     <a href="#second">
         <div class="tab">
             <div class="icon">
                 <%= image_tag "all.png", :class => "icon img" %>
             </div>
             second tab
         </div>
     </a>
     <div id="roll" class="contents">
      <%= render 'questions/list' %>
     </div>
     <div id="other" class="contents">
         <%= render 'answers/list' %>
     </div>
 </div>

这是我的javascript：

$(document).ready(function() {
  $("#tabs").tabs();
});

基本上按照 jquery website

这是我的所有 jquery js 链接的标题：

<%= javascript_include_tag "jquery-1.8.2.min.js" %>
<%= javascript_include_tag "jquery-ui-1.8.23.custom.min.js" %>

编辑：想通了，没有正确加载 javascript jquery UI 文件。

Answer 1

为了创建呈现为选项卡的选项卡，您需要将每个选项卡添加为<li> 项，如下所示：

<ul>
  <li><a href="#first">Tab Title #1</a></li>
  <li><a href="#second">Tab Title #2</a></li>
</ul>

现在您的标签将显示为标签！您需要在<div id="tabs"> 之后添加无序列表。

如前所述：查看有关标签的文档：http://jqueryui.com/tabs/

Answer 2

在您的文档就绪函数中，它应该是：

$("#tabs").tabs();

查看 jQuery UI 文档： http://jqueryui.com/tabs/