1

私はRubyonRailsアプリに取り組んでおり、ページの左側を基本的に2つのタブで制御しようとしています。2つのタブをクリックするたびに、コンテンツを交換したいのですが...典型的なタブの動作です。私は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のWebサイトによる

これは、すべてのjqueryjsリンクを含む私のヘッダーです。

<%= javascript_include_tag "jquery-1.8.2.min.js" %>
<%= javascript_include_tag "jquery-ui-1.8.23.custom.min.js" %>

編集：それを理解しました、javascriptjqueryUIファイルを正しくロードしていませんでした。

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 に答える