Вкладки семантического пользовательского интерфейса - удаленная загрузка активного сегмента при начальной загрузке страницы

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 не запускает событие активации на первой вкладке при его создании. Если это правда, то это может объяснить, почему это происходит. JQuery отчет об ошибке

Мое решение - программно активировать вкладку. В документации по семантическому интерфейсу упоминается об этом, но информация немного расплывчатая: найдите ее в «Tabs - Usage»: где она ссылается на «Initializing Tabs ... без меню». Семантический интерфейс - Вкладки - использование

Вкладки могут быть активированы с помощью 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>