BookBlock jQuery插件在nav-tabs内无法正常工作的问题

我之前踩过一模一样的坑！Bootstrap的nav-tabs默认会把非激活的标签面板设为display:none，而BookBlock在初始化的时候需要读取元素的尺寸、位置这些信息——隐藏元素的尺寸都是0，插件自然没法正常渲染图片和绑定交互事件。下面是几个亲测有效的解决办法，你可以根据自己的场景选：

方法1：切换标签时按需初始化BookBlock（最推荐） #

与其页面加载时就初始化所有标签里的BookBlock，不如等用户切换到对应标签时再初始化，这样完全避开隐藏元素的问题。

先给标签页绑定Bootstrap的shown.bs.tab事件（这个事件是标签切换完成后触发的）：

// 先销毁可能存在的重复实例（避免多次初始化报错）
$('.bookblock').bookblock('destroy');

// 监听标签切换事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // 获取当前激活的标签面板ID
  const targetPanel = $(e.target).attr('href');
  // 找到面板里的BookBlock容器
  const $bookBlock = $(targetPanel).find('.bookblock');
  
  // 只有没初始化过的才执行初始化
  if (!$bookBlock.data('bookblock')) {
    $bookBlock.bookblock({
      // 这里替换成你的BookBlock配置参数
      speed: 700,
      shadow: true,
      direction: 'ltr'
      // ...其他你需要的配置
    });
  }
});

// 初始化默认激活的标签页里的BookBlock
$('.nav-tabs .active a').trigger('shown.bs.tab');

小提示：记得把.bookblock换成你实际项目中BookBlock容器的类名/选择器，配置参数根据需求调整就好。

方法2：修改标签面板的隐藏方式（不用改JS） #

Bootstrap默认用display:none藏面板，我们改成用visibility:hidden+height:0来隐藏，这样元素的尺寸依然能被插件读取到，初始化就正常了。

添加自定义CSS覆盖默认样式：

/* 重写Bootstrap标签面板的隐藏逻辑 */
.tab-content > .tab-pane {
  display: block !important; /* 强制显示，让插件能读取尺寸 */
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.tab-content > .active {
  visibility: visible;
  height: auto;
  overflow: visible;
}

然后正常初始化所有BookBlock就行：

$(document).ready(function(){
  $('.bookblock').bookblock({
    // 你的配置参数
  });
});

这个方法的好处是不用动JS逻辑，但要注意检查会不会影响你页面上其他依赖display:none的组件，比如一些弹窗、下拉菜单之类的。

方法3：初始化前临时显示所有面板 #

如果不想改CSS，也可以在初始化BookBlock之前，临时把所有标签面板显示出来，让插件能正确计算尺寸，初始化完成后再把非激活面板藏回去。

$(document).ready(function(){
  // 临时显示所有标签面板
  $('.tab-content .tab-pane').show();
  
  // 初始化所有BookBlock
  $('.bookblock').bookblock({
    // 你的配置参数
  });
  
  // 恢复隐藏非激活面板
  $('.tab-content .tab-pane:not(.active)').hide();
});

// 切换标签时，调用BookBlock的resize方法确保显示正常
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  const targetPanel = $(e.target).attr('href');
  $(targetPanel).find('.bookblock').bookblock('resize');
});

resize是BookBlock自带的方法，用来重新计算容器尺寸，确保切换标签后内容显示正常。

内容的提问来源于stack exchange，提问作者Avinash Goen