1

我正在开发一个 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网站

这是我所有 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 文件。

4

2 回答 2

2

为了创建呈现为选项卡的选项卡，您需要将每个选项卡添加为<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/

于 2012-11-08T22:16:05.163 回答
0

在您的文档就绪功能中，它应该是：

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

请参阅 jQuery UI 文档：http: //jqueryui.com/tabs/

于 2012-11-08T21:56:17.540 回答