Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Проблемы с tabs bootstrap как решить?

Проблемы с tabs bootstrap как решить?


     04.10.2018    bootstrap, js    Общие вопросы, Общие вопросы по вёрстке, jQuery, Ламерские вопросы    1220

вопрос
хочу реализовать под категорию табов
Ну возникла проблема такая, что не отображается Вариант 4 ну под категория табов работает на Варианте 3 что не так?

Вот Js
// Переключение табов
$(function() {
$('ul.tabs_caption').on('click', 'li:not(.active)', function() {
$(this).addClass('active').siblings().removeClass('active').closest('div.tabs').find('div.tabs_content').removeClass('active').eq($(this).index()).addClass('active');
});
});

Вот сам вывод табов
  
   <div class="tabs">
        <ul class="tabs_caption" data-animated="bounceIn" id="nav_btns">
            <li class="active">
                <div class="btn_selection"><span>Вариант 1</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вариант 2</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вариант 3</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вариант 4</span></div>
            </li>
        </ul>
      
      <div class="tabs_content active">
            {custom category="1,2,3" template="shortstory" order="title" sort="desc" limit="100"}
        </div>
        <div class="tabs_content">
            {custom category="3" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
        <div class="tabs_content">   
        <div class="tabs">
        <ul class="tabs_caption" data-animated="bounceIn" id="nav_btns">
            <li class="active">
                <div class="btn_selection"><span>Первая</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Вторая</span></div>
            </li>
        </ul>
        
        <div class="tabs_content active">
            {custom category="1,2" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
        <div class="tabs_content">
            {custom category="1" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
    </div>
        </div>
        <div class="tabs_content">
            {custom category="1" template="shortstory" order="date" sort="asc" limit="100"}
        </div>
    </div> 

Ответил: Flash


В JS вместо "find" поставьте "children", то есть, код будет такой

// Переключение табов
$(function() {
$('ul.tabs_caption').on('click', 'li:not(.active)', function() {
$(this).addClass('active').siblings().removeClass('active').closest('div.tabs').children('div.tabs_content').removeClass('active').eq($(this).index()).addClass('active');
});
});

3 комментария

progressive
Юзер

progressive - 4 октября 2018 08:48 -

Спасибо Flash ты мой спаситель! )))
мучаюсь тут уже какой день!

progressive
Юзер

progressive - 25 октября 2018 10:03 -

Что то сегодня заметил, при изменения шаблона в других группах к примеру shortstory_news

{custom category="1" template="shortstory" order="date" sort="asc" limit="100"}

{custom category="3" template="[b]shortstory_news[/b]" order="date" sort="asc" limit="100"}


ламается tabs, переходят напрямую полную(fullstory) первую новость почему?

Flash
Эксперт

Flash - 25 октября 2018 15:28 -

Не совсем понял, куда "переходят"? Есть ссылка или скрин?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 12.06.2014 never3d222  Общие вопросы
наверх