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>

语义UI选项卡-在初始页面加载时远程加载活动段

1 个答案: