2

私はjQueryが初めてです（数週間）。jQueryUI タブ コントロールをネストしようとしています。ネストされたタブが外部ファイルになるまで正常に動作し、jQuery ソースで例外がスローされます。入れ子になったタブの .ready 関数に警告ボックスを配置すると機能するため、これはある程度タイミングの問題のようです。誰でも助けることができますか？この質問は以前に尋ねられたにちがいないと確信していますが、何時間も検索しても解決策が見つからないようです.

これが私の非常に簡単な例です...

アウタータブ

    <head id="Head1" runat="server">
    <title></title>
    <link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
      rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/
    jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
       ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
       ui.tabs.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#OuterTab").tabs();
        });
    </script>
    </head>
<body>
  <div id="OuterTab">
    <ul>
      <li><a href="innerTab1.aspx" title="InnerTab1"><span>InnerTab1</
         span></a></li>
      <li><a href="innerTab2.aspx" title="InnerTab2"><span>InnerTab2</
         span></a></li>
    </ul>
    <div id="InnerTab1">
    </div>
    <div id="InnerTab2">
    </div>
  </div>
</body>
</html>

InnerTab1.aspx

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title></title>
    <link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
      rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/
      jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
      ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
      ui.tabs.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>
   <div id="tabs">
        <ul>
          <li><a href="#tabA1"><span>InnerTabA1</span></a></li>
          <li><a href="#tabA2"><span>InnerTabA2</span></a></li>
        </ul>
        <div id="tabA1"></div>
        <div id="tabA2"></div>
   </div>
</body>
</html>

InnerTab2.aspx

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
     <link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });
    </script>
</head>
<body>
   <div id="tabs">
        <ul>
          <li><a href="#tabB1"><span>InnerTabB1</span></a></li>
          <li><a href="#tabB2"><span>InnerTabB2</span></a></li>
        </ul>
        <div id="tabB1"></div>
        <div id="tabB2"></div>
   </div>
</body>
</html>

前もって感謝します！

エイドリアン

4

3 に答える 3

3

'Tabs' ID 属性が重複しているため、間違いなく少し問題が発生しています。次の例は、あなたが探しているものを達成するはずです:
Main File (Outer Tab)

<html>
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" href="http://static.jquery.com/ui/themes/base/ui.base.css"
      rel="stylesheet" />
    <link type='text/css' href='http://static.jquery.com/ui/themes/base/ui.tabs.css'
      rel='stylesheet'>
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

</head>
<body>
  <div id="OuterTab">
    <ul>
      <li><a href="#InnerTab1" title="InnerTab1"><span>InnerTab1</span></a></li>
      <li><a href="#InnerTab2" title="InnerTab2"><span>InnerTab2</span></a></li>
    </ul>
    <div id="InnerTab1">   
    </div>
    <div id="InnerTab2">
    </div>
  </div>
      <script type="text/javascript">
        $(function() {
            $("#OuterTab").tabs();
            $('#InnerTab1').load('tab1.html', function() {
              $('#tabs').tabs();
            });
            $('#InnerTab2').load('tab2.html', function() {
              $('#tabs2').tabs();
            });
        });
    </script>
</body>
</html>

タブ 1 (tab1.html) 

<div id="tabs">
  <ul>
    <li><a href="#tabB1"><span>InnerTabB1</span></a></li>
    <li><a href="#tabB2"><span>InnerTabB2</span></a></li>
  </ul>
  <div id="tabB1">
    This is tab b1 content
  </div>
  <div id="tabB2">
    This is tab b2 content
  </div>
</div>

タブ 2 (tab2.html)

<div id="tabs2">
  <ul>
    <li><a href="#tabA1"><span>InnerTabA1</span></a></li>
    <li><a href="#tabA2"><span>InnerTabA2</span></a></li>
  </ul>
  <div id="tabA1">
    This is tab A1 content
  </div>
  <div id="tabA2">
    This is tab A2 content
  </div>
</div>

このように、メイン ファイルを実行すると、jQuery を介して 2 つのタブ ファイルが要求され、適切な div に読み込まれます。次に、読み込まれたばかりのタブをアクティブにするコールバックを定義しました。

詳細が必要な場合は、コメントでフォローアップしてください。

于 2009-11-02T16:46:21.587 に答える
1

ajaxを介して内部タブをフェッチしている場合は、完全なhtmlドキュメントとjqueryを含めないでください。すべてがjavascriptで再定義されており、競合しています。

を残して、head、body、およびhtmlラッパータグ全体を削除するだけで、機能するはずです。

また、タブがロードされたときにタブを再定義する必要があります。ajax tabs関数にコールバックを追加します-（のようなものfunction ontabAJAX(){ if ($('.tab .active .innertabs').length)){ $('.tab .active .innertabs').removeClass('innertabs').addClass('tabbed').tabs() }）。

于 2009-11-02T15:41:02.077 に答える
1

innerTab ページを呼び出すと、すべての HTML 要素が一度にレンダリングされます。「タブ」などの ID フィールドの複数のコピーで問題が発生している可能性があります... JQuery は $("#tabs") を参照していますが、2 つ存在します。

JQueryエラーを投稿していただけますか?

于 2009-11-02T15:37:54.743 に答える