0

私はjQueryを試して$('#tabs').tabs();、タブを垂直にすることにしました。タブを選択してもコンテンツが表示されないという問題が発生しました。問題の例はここにあります-JSFIDDLE私が見逃しているものがあることは明らかです。Jquery UIのドキュメントを調べてみましたが、何が間違っているのかまだわかりませんでした。なぜこの問題が発生しているのかを知っていただければ幸いです。その他のヒントも大いにありがたいです。

4

4 に答える 4

1

この例を試してください：http：//jqueryui.com/tabs/#vertical

たとえば、追加のCSSが必要です（JSFiddleはjQueryUI 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

2つの問題：

  • 重複する要素がありidます。そして、各の最初のインスタンスはid、コンテンツではなく、リンクを指します。リンクからsを削除しidます。
  • タブウィジェットはCSSに依存しています。ベーススタイルシートを追加すると、機能します。

jsfiddle.net/Kxtvg/280

必要なレイアウトを取得するには、基本スタイルシートから始めて変更する必要があります。

于 2012-11-19T19:09:44.853 に答える
0

まず、ID1ページに2回表示することはできません。<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 に答える