0

我决定尝试使用 jQuery$('#tabs').tabs();并让我的选项卡垂直。我遇到了在选择选项卡时没有显示内容的问题。问题的一个例子在这里 - JSFIDDLE我知道我显然缺少一些东西。我尝试查看 Jquery UI 文档，但仍然不知道我做错了什么。我会很感激知道我为什么会遇到这个问题，任何其他提示也将不胜感激

4

4 回答 4

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">

需要额外的摆弄，但这是一个更新的小提琴

于 2012-11-19T18:55:34.853 回答
0

两个问题：

  • 您有重复的元素id。每个的第一个实例都id指向链接，而不是内容。从链接中删除ids。
  • 选项卡小部件依赖于 CSS。添加基本​​样式表，它就可以工作了。

jsfiddle.net/Kxtvg/280

要获得所需的布局，您必须从基本样式表开始并对其进行修改。

于 2012-11-19T19:09:44.853 回答
0

首先，您ID不能在一页上出现两次。从您的<li>标签中删除它。其次，由于某种原因，jsfiddle 没有提取相关的 css 数据。我将我的剪切并粘贴到那里，它现在可以工作了。

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

于 2012-11-19T19:10:15.113 回答
0

我在头部部分包含了一些代码。在这里。

      <head>        
      <meta charset="utf-8" />
      <title>jQuery UI Tabs - Vertical Tabs functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
      <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <script>
       $(function() {
         $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
         $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
       });
      </script>
      </head>

参考：http: //jqueryui.com/tabs/#vertical

工作模型：http: //jsfiddle.net/abhijalgaonkar/qTXnN/

尽量不要修改源 css 文件中的 css。越过 css 会是一个更好的选择。

让我知道它是否有帮助....

于 2012-11-19T19:25:56.280 回答