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/