semantic-ui - 语义 UI 选项卡 - 在初始页面加载时远程加载事件段

Question

如何让我的事件选项卡和分段显示在初始页面加载上 - 我的选项卡使用 ajax 远程加载，并且当您单击它们时所有工作都可以工作，但在第一页加载时选项卡分段为空:

    <div class="ui tabular menu grid">
      <div class="ui container">  
        <a class="item active tabby" data-tab="home"><i class="large home icon"> 
         </i>Home</a>
        <a class="item tabby"  data-tab="two"><i class="large chart bar icon"></i>Two</a>
        <a class="item tabby" data-tab="three"><i class="large calendar icon"</i>Three</a>
        <a class="item tabby" data-tab="four"><i class="large clock icon"></i>Four</a>
      </div>
    </div>

    <div class="ui center aligned grid">
      <div class="ui container">
        <div class="ui tab active segment " data-tab="home"></div>
        <div class="ui tab segment" data-tab="two"></div>
        <div class="ui tab segment" data-tab="three"></div>
        <div class="ui tab segment" data-tab="four"></div>
      </div>
    </div>

初始化:

$('.tabular.menu .item')
      .tab({
        cache: false,
        evaluateScripts : true,
        auto    : true,
        path    : '/dashboard',
        ignoreFirstLoad: false,
        alwaysRefresh: true
      });

Answer 1

我遇到了同样的问题，当页面加载时，第一个或“事件”选项卡将打开并显示 html 源定义的内容，但它不会自动加载。但是，单击该选项卡会导致自动加载。

我刚刚读过一篇文章，该文章表明 jQuery 在创建第一个选项卡时不会触发第一个选项卡上的 activate 事件。如果这是真的，那么也许可以解释为什么会发生这种情况。 jQuery bug report

我的解决方案是以编程方式激活该选项卡。语义 ui 文档提到这样做，但信息有点模糊:在“选项卡 - 用法”中找到它:它指的是“初始化选项卡...没有菜单”。 Semantic UI - Tabs - usage

可以使用 jQuery 激活选项卡:

$.tab('change tab','tab-name');

其中“tab-name”是您在“data-tab="tab-name”中指定的“路径”。起初我发现这只是打开和关闭选项卡而没有自动加载，直到我使用 jQuery 选择器选择了 MENU 项，而不是 TAB 项，然后自动加载起作用了。

因此，我在 Document.Ready 函数中初始化选项卡后立即激活该选项卡:-

$('#infotabs .menu .item')
  .tab({
    auto: true,
    path: '/pathto/'
  })

  $('#infotabs .menu .item').tab('change tab','tab1.php')
;

这是相应的 HTML:

<div id="infotabs">
  <div class="ui top attached tabular menu">
    <a class="active item" data-tab="tab1.php">tab1</a>
    <a class="item" data-tab="tab2.php">tab2</a>
    <a class="item" data-tab="tab3.php">tab3</a>
  </div>
  <div class="ui active bottom attached tab segment" data-tab="tab1.php">
    1
  </div>
  <div class="ui bottom attached tab segment" data-tab="tab2.php">
    2
  </div>
  <div class="ui bottom attached tab segment" data-tab="tab3.php">
    3
  </div>
</div>