jQuery UI标签表现得像链接，而不是标签

Question

我正在使用Ruby在Rails应用程序上工作，并且我试图将页面的左侧基本上由两个选项卡控制。我希望每次点击它们之间的两个选项卡之间进行交换...只是典型的标签行为。我正在使用jQuery-ui-tabs。现在，我已经将其设置在两个选项卡都可以单击并链接到DIV的位置，但是两者最初是在我加载页面时，彼此之间会立即呈现，然后单击选项卡将我带到页面上的点每个DIV启动而不是页面停留在同一位置和内容切换。这似乎不应该那么困难，但是我花了很长时间感到非常沮丧，所以我会喜欢/感谢任何帮助！

我写了一个部分视图，该视图包含标签和"链接"，并将它们引导到呈现不同视图的divs。

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

这是我的标题，所有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/