1

私はjQuery UIタブ(AJAX経由のコンテンツ)を使用しています:(

<div id="tabs">  //these tabs are working fine
  <ul>
      <li><a href="<?php echo $this->url(array(), 'abc')  ?>">A</a></li>
      <li><a href="<?php echo $this->url(array(), 'asd')  ?>">B</a></li>
      <li><a href="<?php echo $this->url(array(), 'xyz')  ?>">C</a></li>
  </ul>

xyzコントローラーのビューに以下のコードを追加しましたが、機能しません

<script>
     $(function() {
         $( "#tabss" ).tabs();
       });
</script>

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

<div id="tabss-1">
  <p>abcd.......</p>
</div>

<div id="tabss-2">
  <p>xyz.......</p>
</div>

<div id="tabss-3">
  <p>abcd.......</p>
   <p>content.......</p>
</div>

私はすでにこれらすべてを含めました

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
4

2 に答える 2

1

Kevin B が指摘しているように、xyz コントローラー内にタブを作成するスクリプトはすぐに実行されます。

<script>
     $(function() {
         $( "#tabss" ).tabs();
       });
</script>

documnent.ready イベントは、「C」タブをクリックしてこのデータをロードできるようになるまでに、すでに発生しています。ドキュメントには、AJAX コンテンツが遅延ロードされていることを暗示していますが、明確には述べられていません。つまり、そうではありません。タブがクリックされるまでリクエストを行わないでください。しかし、ネットワーク トラフィックを調べると、これが事実であることがはっきりとわかります。

「xyz」コントローラのコンテンツを変更して、タブ コンテンツ自体のすべての HTML の後に<script>、最後に設定するためのタグを追加してみてください。tabssこのような：

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

<div id="tabss-1">
  <p>abcd.......</p>
</div>

<div id="tabss-2">
  <p>xyz.......</p>
</div>

<div id="tabss-3">
  <p>abcd.......</p>
   <p>content.......</p>
</div>

<script>
     $(function() {
         $( "#tabss" ).tabs();
       });
</script>

Yahooや他のいくつかの情報源では、ライブラリを使用して document.ready まで実行を遅らせている場合でも、ページ上のスクリプトをページの最後に配置することを推奨しています。これは、クライアント側のパフォーマンス上の理由によるものです。

于 2013-03-06T19:22:40.723 に答える