SugarCRM 7自定义标签页视图切换异常求助

我一眼就揪出了问题的核心——你的标签页链接的data-target属性格式不对！Bootstrap的标签页组件要求data-target的值必须是带#号的CSS选择器，用来匹配对应tab-pane的ID，而你现在写的是不带#的裸ID，导致点击时找不到对应的内容区块。

第一步：修正HTML中的data-target属性 #

把你的tab链接代码里的data-target="tab1"改成data-target="#tab1"，data-target="tab2"改成data-target="#tab2"，修改后的完整HTML片段如下：

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" data-target="#tab1">Section 1</a></li>
    <li><a data-toggle="tab" data-target="#tab2">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

第二步：优化JavaScript代码（可选） #

实际上Bootstrap的标签页组件已经内置了点击切换的逻辑，你自己写的click事件绑定有点多余，甚至可能和原生行为冲突。如果不需要自定义控制台输出这类额外逻辑，完全可以删掉这段JS代码。要是你确实需要在切换时做一些自定义操作，可以改用Bootstrap的标签页专属事件，比如：

$(function() {
  $('.nav-tabs a').on('shown.bs.tab', function (e) {
    // 标签页切换完成后执行自定义逻辑
    console.log('已切换到标签页:', $(e.target).text());
  });
});

额外注意：SugarCRM 7环境的兼容性 #

在SugarCRM 7中，页面基于Backbone.js渲染，确保你的代码是在DOM完全加载后执行的。如果是在自定义视图的tpl文件里编写的代码，当前的$(function(){})写法是没问题的，它会在DOM就绪后自动触发。

按照上面的步骤修改后，你的标签页应该就能正常切换了！

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