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/

jquery UI选项卡的作用类似于链接而非选项卡

2 个答案: