Question

I am using the responsivematchheight jquery script to equalize divs in five different tabs.

The active tab works perfectly, but when I change the tab, the script does not fire. I've tried using onclick, activate, load... I'm sure I'm doing something wrong.

Here's the basic function for loading the script:

jQuery(document).ready(function(){

    jQuery('.tabfeature').responsiveEqualHeightGrid();
    });

And here's the block of html that triggers the different tabs:

<div class="tabshome">
  <ul class="nav nav-tabs" id="hometabs">
<li class="active"><a data-toggle="tab" href="#ps">Prospective Students</a>    </li>
<li><a data-toggle="tab" href="#cs">Current Students</a></li>
    <li><a data-toggle="tab" href="#fs">Faculty/Staff</a></li>
<li><a data-toggle="tab" href="#comm">Our Community</a></li>
<li><a data-toggle="tab" href="#alum">Alumni</a></li>
</ul>
      <div class="tab-content">
<div id="ps" class="tab-pane fade in active">     
<?php if( have_rows('prospective_students') ): ?>

<?php while( have_rows('prospective_students') ): the_row(); 

    // vars
    $ps_photo = get_sub_field('ps_box_one_photo');
    $ps_title = get_sub_field('ps_box_one_title');
    $ps_text = get_sub_field('ps_box_one_text');
    $ps_link = get_sub_field('ps_box_one_link');
    $ps_linktext = get_sub_field('ps_box_one_link_text');
    ?>
<div class="tabholder">
    <div class="tabfeature">

I've tried all of the following (not all at once...):

jQuery("#hometabs a").click(function(responsiveEqualHeightGrid){
            jQuery('.tabfeature').responsiveEqualHeightGrid();

});
jQuery( "#hometabs" ).tabs();
 jQuery("#hometabs").tabs({
create: function(event, ui) {

    jQuery('.tabfeature').responsiveEqualHeightGrid();
}
});

jQuery( "#hometabs" ).on( "tabsload", function( event, ui ) {
jQuery('.tabfeature').responsiveEqualHeightGrid(); } );

Here's the page: http://tcmedc.wpengine.com

Am I using incorrect syntax or am I just totally off-base??

Answer 1

您可以在选项卡构造函数中定义加载过程：

＆＃13;

$("#hometabs").tabs({
  load: function(event, ui){
    $('.tabfeature').responsiveEqualHeightGrid();
  }
  create: function(event, ui) {
    $('.tabfeature').responsiveEqualHeightGrid();
  }
});

＆＃13;

但我认为它不会像你期望的那样发挥作用。 https://api.jqueryui.com/tabs/#event-load处的API描述描述了在加载远程选项卡后由AJAX调用触发的事件，您需要使用此事件：https://jqueryui.com/tabs/#ajax。据我所知，你的标签是由PHP脚本预先生成的，你看到的respondEqualHeightGrid（）的效果实际上来自你触发它的其他地方。

如果您只想在打开新标签时触发，则可以改为使用activate:触发器：

＆＃13;

$("#hometabs").tabs({
  activate: function(event, ui){
    $('.tabfeature').responsiveEqualHeightGrid();
  }
  create: function(event, ui) {
    $('.tabfeature').responsiveEqualHeightGrid();
  }
});

＆＃13;

激活不会在创建时被触发，因此您仍需要create:指令。如果激活不适合您，您可以使用选项卡链接中的href属性来选择链接点击事件中的相应选项卡：

＆＃13;

$("#hometabs a").click(function() {
  $('.tabfeature').responsiveEqualHeightGrid();
  //OR to target specifically the tab you’re opening;
  $($(this).attr("href")).find(".tabfeature").responsiveEqualHeightGrid();
});

＆＃13;

Answer 2

仅供参考 - 我找到了解决方案 - 虽然我从未找到答案！

但如果有人遇到这个问题，我尝试了另一个名为jquery-match-height.js（https://github.com/liabru/jquery-match-height）的jQuery插件脚本，它内置了处理程序和触发器来处理页面上的事件和更改。

开箱即用！：）

Trigger jquery function on tab load? None of my attempts are working

2 个答案: