jquery选项卡没有转换

时间:2012-11-19 18:48:18

标签: javascript jquery jquery-ui jquery-ui-tabs

我决定尝试jQuery $('#tabs').tabs();,并使我的标签垂直。我在选择标签时遇到了没有内容显示的问题。问题的一个例子是here - JSFIDDLE我知道显然我缺少了一些东西。我试着查看Jquery UI文档,但仍然没有意识到我做错了什么。我很高兴知道为什么我遇到这个问题,其他任何提示也会非常感激

3 个答案:

答案 0 :(得分:1)

试试这个例子:http://jqueryui.com/tabs/#vertical

你需要一些额外的CSS(你的JS Fiddle没有加载jQuery UI CSS),例如:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">

需要额外的摆弄,但这里是updated fiddle

答案 1 :(得分:0)

两个问题:

  • 您有重复的元素id。并且每个id的第一个实例指向链接,而不是内容。从链接中删除id
  • 标签小部件依赖于CSS。添加base stylesheet并使其正常工作。

jsfiddle.net/Kxtvg/280

要获得所需的布局,您必须从base stylesheet开始并对其进行修改。

答案 2 :(得分:0)

首先,您的ID无法在一个页面上出现两次。从<li>标记中删除它。其次,由于某种原因,jsfiddle不会提取相对的css数据。我把它切割并粘贴到那里,它现在有效。

http://jsfiddle.net/Kxtvg/279/