2

jqueryUI に少し問題があります。ページにコンテンツを追加すると、UI が有効にならないことに気付きました。この例を試してみたところ、期待どおりに機能しているように見えますが、拡張しようとするとうまくいきませんでした。

私は自分のコードにこれを持っています

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs();
    $('#tabs-1').click(function() {
        $('.boo').load('boo.html');
    });
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
Hello World!

    <div class="boo">

    </div>
  </div>
  <div id="tabs-2">

  </div>
  <div id="tabs-3">

    <p>Some Test</p>
  </div>
</div>


</body>
</html>

これはboo.htmlにあります

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tabb</a></li>
    <li><a href="#tabs-2">More  </a></li>
    <li><a href="#tabs-3">iFinal</a></li>
  </ul>
  <div id="tabs-1">
      First Tab
  </div>
  <div id="tabs-2">
      Second Tab
  </div>
  <div id="tabs-3">
      Final Tab
  </div>
</div>

最初のタブ内にタブが表示されることを期待していました。しかし、これは私が代わりに見たものです

ここに画像の説明を入力 どんな助けでも大歓迎です。

4

3 に答える 3

0

新しいコンテンツがロードされた後、そのタブを初期化する必要があります。これを行うには、load の完全なコールバックを使用します。また、常に存在する要素に clcik ハンドラーを委譲する必要があります。要素を削除または置換すると、それにバインドされているイベント ハンドラーはすべて失われます。

$(document).on('click','#tabs-1',function() {
       $('.boo').load('boo.html', function(){
           /* new content exists now, can run code on it*/
           $( "#tabs" ).tabs();
       });
});
于 2013-10-31T18:12:23.777 に答える
0

最初の問題は、ID を使用して両方のタブに名前を付けていることです。それらをクラスに変更することを検討してください。次に、DOM を変更するたびに、そのクラスで .tabs() を呼び出します。

boo.html

<div class="tabs">
  <ul>
     <li><a href="#booTab1">Tabb</a></li>
     <li><a href="#booTab2">More</a></li>
     <li><a href="#booTab3">iFinal</a></li>
  </ul>
  <div id="booTab1">First Tab</div>
  <div id="booTab2">Second Tab</div>
  <div id="booTab3">Third Tab</div>
</div>

親コード:

<div class="tabs" id="tabContainer">
  <ul>
     <li><a href="#tabContainerTab1">Nunc tincidunt</a></li>
     <li><a href="#tabContainerTab2">Proin dolor</a></li>
     <li><a href="#tabContainerTab3">Aenean lacinia</a></li>
  </ul>
  <div id="tabContainerTab1">
     <p>Hello World!</p>
     <div class="boo"></div>
  </div>
  <div id="tabContainerTab2"></div>
  <div id="tabContainerTab3"><p>Some Test</p></div>
</div>

<script type="text/javascript">
   $(function() {
      $( ".tabs" ).tabs();
      $('#tabContainerTab1').click(function() {
         $('.boo').load('boo.html', function () { 
            $('.tabs').tabs();
         });
       });
    });
</script>
于 2013-10-31T18:50:20.573 に答える