Помогите сформировать и правильно написать одно условие (PHP)?

Вопросы
Здравствуйте.
Есть форум (плагин LS Board — Форум) с двумя основными категориями и множеством подкатегорий. Все это выводится на одну страницу. И получается большая простыня.
Вот изначальный код вывода категорий и подкатегорий:
{foreach from=$aForums item=oForum}
      {if $oForum->getAllowShow()}
        {assign var='aSubForums' value=$oForum->getChildren()}
        <section class="forums-list category-block toggle-section" id="category-{$oForum->getId()}">
          <header class="forums-header well well-sm">
            <i class="js-forum-cat-toggler"></i>
            <h2><a href="{$oForum->getUrlFull()}" title="{$oForum->getTitle()}"><i class="fa fa-folder fa-lg"></i> {$oForum->getTitle()}</a></h2>
          </header>
          <div class="forums-content well">
            {include file="$sTemplatePathForum/forums_list.tpl" aForums=$aSubForums}
          </div>
          <div class="forums-note clearfix" style="display:none;">
            <div class="fl-r">
              <strong>{$oForum->getCountTopic()|number_format:0:'.':$oConfig->Get('plugin.forum.number_format')}</strong> {$oForum->getCountTopic()|declension:$aLang.plugin.forum.topics_declension:'russian'|lower}
              <span>|</span>
              <strong>{$oForum->getCountPost()|number_format:0:'.':$oConfig->Get('plugin.forum.number_format')}</strong> {$oForum->getCountPost()|declension:$aLang.plugin.forum.posts_declension:'russian'|lower}
            </div>
          </div>
        </section>
      {/if}
    {/foreach}


Решил внести изменения в отображения с помощью вкладок, Tabs из Bootstrap (getbootstrap.com/javascript/#tabs). Что две основные категории с подкатегориями разбивались на две вкладки.

<ul class="nav nav-tabs" id="cat-tab">
      <li class="active"><a href="#category-13" data-toggle="tab">форум_1</a></li>
      <li class=""><a href="#category-11" data-toggle="tab">-форум_2</a></li>
</ul>

 <div class="tab-content">
         {foreach from=$aForums item=oForum}
                   {if $oForum->getAllowShow()}
                             {assign var='aSubForums' value=$oForum->getChildren()}
                       <div class="tab-pane forums-list toggle-section" id="category-{$oForum->getId()}">
                               <header class="forums-header well well-sm">
                                                  <i class="js-forum-cat-toggler"></i>
                                                  <h2><a href="{$oForum->getUrlFull()}" title="{$oForum->getTitle()}"><i class="fa fa-folder fa-lg"></i> {$oForum->getTitle()}</a></h2>
                                        </header>
                                       <div class="forums-content well">
                                                {include file="$sTemplatePathForum/forums_list.tpl" aForums=$aSubForums}
                                       </div>
                                       <div class="forums-note clearfix" style="display:none;">
                                                <div class="fl-r">
                                                         <strong>{$oForum->getCountTopic()|number_format:0:'.':$oConfig->Get('plugin.forum.number_format')}</strong> {$oForum->getCountTopic()|declension:$aLang.plugin.forum.topics_declension:'russian'|lower}
                                                         <span>|</span>
                                                         <strong>{$oForum->getCountPost()|number_format:0:'.':$oConfig->Get('plugin.forum.number_format')}</strong> {$oForum->getCountPost()|declension:$aLang.plugin.forum.posts_declension:'russian'|lower}
                                               </div>
                                       </div>
                     </div>
                  {/if}
            {/foreach}
</div>


Проблема в том, что по умолчанию одна из вкладок сразу должна обладать классом active. Если сразу присвоить, здесь:

<div class="tab-pane forums-list toggle-section active" id="category-{$oForum->getId()}">


То все вкладки активны, все показываются, а должна одна.
В связи с этим прошу помощи в написании условия которое присваивало бы класс active нужной вкладке в нужный момент?

6 комментариев

avatar
Вам необходимо использовать Javascript для активации необходимой вкладки.
Описание, ивенты и методы раскрыты тут.

Вкратце, все ваши табы не должны обладать классом active. А активация соответствующего таба должна выполняться с помощью JS:
this.$('.my-tab a:first').tab('show');

В примере выше активируется первый таб из таб-меню .my-tab

Таким образом, вам достаточно привязаться к какому-нибудь параметру, который будет определять номер активируемого таба. Применив соответствующий псевдо-селектор, вы активируете соотв. таб.
Не забываем подгружать библиотеку tab.js из комплекта Bootstrap.

avatar
Либо, если не требуется автоматической активации таба, а активация должна выполняться по клику на соответсвующий таб, достаточно просто использовать следующую конструкцию: 
$('.my-tab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})


В данном случае, все табы будут активироваться по клику на них. Необходимо перед этим активировать, например, первый таб, как в примере выше. Иначе пользователь будет в замешательстве — при открытии страницы ни один таб не открыт.
avatar
Кроме этого, теперь вам доступны ивенты табов — вы можете отслеживать, какой таб открывается, и какой таб будет закрыт.
В некоторых случаях это очень полезно. В документации из первого комментария подробно описаны манипуляции с табами.
avatar
Спасибо большое вам за ответы, уделенное время.
avatar
А можете подсказать, можно использую евенты табов сделать сортировку? И как вообще могут выглядеть евенты табов
avatar
Можно сделать все, только мне кажется, что использование табов для сортировки — не совсем тривиальная задача под данный тип элементов UI.

Вся работа с табами Бутстрапа хорошо описана в документации к Бутстрапу
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.