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/