1

AJAX を読み込んだタブが正しく機能しています。これがコードです。

<div id="tabs">
  <ul>
    <li><a href="../about-leadership-admin-ajax/">Leadership / Admin</a></li>
    <li><a href="../about-sales-marketing-ajax/">Sales & Marketing</a></li>
    <li><a href="../about-service-desk-technicians-ajax/">Service Desk Technicians</a></li>
    <li><a href="../about-technology-consultants-ajax/">Technology Consultants</a></li>
    <li><a href="../about-manufacturing-consultants-ajax/">Manufacturing Consultants</a></li>
    <li><a href="../about-salesforce-cpm-consultants-ajax/">Salesforce/CPM Consultants</a></li>
    <li><a href="../about-developers-ajax/">Developers</a></li>
  </ul>
</div>

そして私の初期化スクリプト：

<script>
  jQuery(function() {
    jQuery( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    jQuery( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

    jQuery( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible." );
        });
      }
    });
  });
</script>

各タブにjQueryスライダーがあります。新しいタブに移動するまで、最初のタブ (ロードされた最初のタブ内) のみが正しく機能します。最初のタブに戻ると、スライダーがすべて台無しになっています。AJAX が読み込まれた各タブに必要な初期化スクリプトは次のとおりです。

<script>
jQuery(document).ready(function(){
jQuery('#horiz_container_outer').horizontalScroll();
});
</script>

(document).ready が機能しないことはわかっています。これを機能させるには、タブ初期化スクリプトのどこに何を配置すればよいかを知る必要があります。

jQuery のいくつかの関数のいずれかを使用する必要があることはわかっていますが、何をどこで使用すればよいかわかりません。私のオプションは、.load()、.bind()、.success() のように見えます。

誰かが私を正しい方向に向けて具体的に教えてくれれば幸いです. 前もって感謝します。私も解決策に喜んでお金を払います:)

4

1 に答える 1

0

activate イベントを使用してみてください

jQuery( "#tabs" ).tabs({
  beforeLoad: function( event, ui ) {
    ui.jqXHR.error(function() {
      ui.panel.html(
        "Couldn't load this tab. We'll try to fix this as soon as possible." );
    });
  }
  activate: function( event, ui ) {
    jQuery('#horiz_container_outer').horizontalScroll();
  }
});
于 2013-10-14T13:06:25.967 に答える