jQuery UI选项卡如何工作

时间:2013-02-12 09:55:26

标签: jquery ruby-on-rails-3 jquery-ui

在Ruby on rails 3.1+中这是我的代码

_form.html.erb:

<div id="tabs">
   <ul>
     <li><a href="#tabs-1">Tab1</a></li>
     <li><a href="#tabs-2">Tab2</a></li>
   </ul>
</div>

test.js.coffee

$("#tabs").tabs()

在我的application.js

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require_tree .

为什么不显示标签?我尝试写在application.js

$(document).ready(function() {
  alert("test!");
  $("#tabs").tabs();
  }

测试消息显示,但标签不显示...感谢先进的帮助我

Aesis。

1 个答案:

答案 0 :(得分:0)

老兄,你需要每个标签的内容。每个锚点都使用href attibute指向其选项卡的内容。你需要放一个名为tabs-1的div和一个名为tabs-2的div来实现这一点。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Hi, this is the first tab.</p>
    </div>
    <div id="tabs-2">
        <p>This is the 2nd tab.</p>
    </div>
</div>