jQuery UI Tabs does not load content correctly until window resize

问题

I'm having some issues using jQuery UI Tabs in my Wordpress install. For some reason the content inside the tabs does not load correctly until the user resizes the window.

I'm not sure how to debug this, there's no errors on the page either.

Link to the dev site

Before resize:

After resize:

The problem is in the third tab, here's what's in it:

<div id="tabs-3">
    <article class="hentry">
        <section class="entry-content cf">
            <div class="blueprint-images">
                <?php

                $blueprint_slider = get_field('blueprints_images');
                if ($blueprint_slider == '') {
                    ?>
                    <div class="info">
                        <h3>Plantegninger – 2 flotte boliger på endetomt for salg</h3>
                        <p>Ta kontakt for tegninger og mer informasjon. Husene er ca. 200 kvm BRA.</p>
                    </div>
                    <?php
                } else {
                    echo do_shortcode( "[envira-gallery id=". $blueprint_slider->ID ."]" );
                    echo do_shortcode( "[envira-gallery slug=". $blueprint_slider->post_name ."]" );
                }

                ?>
            </div>

            <div class="blueprint-tables">
                <?php
                $tablepress_id = get_field('blueprints_sales_table');
                tablepress_print_table( array( 'id' => ".'$tablepress_id'.", 'use_datatables' => true, 'print_name' => false ) );
                ?>
            </div>
        </section>
    </article>
</div>

回答1:

The tab that contains the Envira images is not initially visible and has no dimensions at the time when Envira figures out the parent width. When you view the tab and then resize the browser, your enviraSetWidths() routine corrects this. However, note that if you resize the browser before visiting the third tab, and then visit the tab, the images are still small because the parent container (tab) had width:0 before it was opened.

To fix this, bind to the tabsactivate event and trigger the resize handler:

$( "#tabs" ).on( "tabsactivate", function( event, ui ) 
{
  $(window).triggerHandler("resize");
} );

$("#tabs").tabs();
var tabWidths = [];
$("div", "#tabs").each(function() {
  tabWidths.push({
    id: this.id,
    width: Math.round($(this).width())
  });
});

alert("Initial tab widths:\n" + JSON.stringify(tabWidths).replace(/,/g,',\n'));

$("#tabs").on("tabsactivate", function()
              {
  alert("Id: " + this.id + " -- width: " + Math.round($(this).width()));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<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">
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
</div>

来源：https://stackoverflow.com/questions/32221248/jquery-ui-tabs-does-not-load-content-correctly-until-window-resize