2017-02-02 3 views
0

Я прочитал несколько сообщений о том, как сделать вкладку в начальной загрузке, сохранить ее состояние после перезагрузки страницы. Я придумал совершенно другой способ, характерный для моей ситуации, поэтому я не спрашиваю, как вы это делаете.Настроить вкладку Bootstrap на странице перезагрузки, но не как это сделать

В конце моей страницы у меня есть только этот код, и я использую шаблоны TWIG для ввода значений по мере необходимости. Это случай, о котором вы не знаете, вот что такое {{tab_index}}. Я просто вводя номер индекса вкладки, которую я хочу открыть, когда страница загружается.

Во всяком случае, этот маленький фрагмент кода в конце моей страницы:

$(document).ready(function(){ 
    $('.nav-tabs li:eq({{ tab_index }}) a').tab('show'); 
}); 

достаточно просто, за исключением того, когда страница первоначально загружает его на первой вкладке затем быстро меняется на вкладку я говорю это, чтобы показать. Это создает «мерцание», которое выглядит довольно глупо. Есть ли способ переключиться на вкладку без мерцания? Может быть, переключитесь на соответствующую вкладку, когда страница будет загружена, но до ее отображения?

EDIT: Ok здесь некоторый код, чтобы показать вам, как это работает:

Во-первых, я использую структуру MVC и шаблоны Twig, как на мой взгляд. Итак, в моей таблице маршрутизатора я определил маршрут, подобный [Controller]/[id]/[Action]. Идентификатор может быть любым целым числом. Таким образом, маршрутизатор анализирует контроллер, идентификатор и действие как разные значения в массиве. Значение Controller - это имя класса для создания экземпляра, а Action - метод вызова этого нового объекта контроллера. Идентификатор может быть любым целым по любой причине и может быть доступен из массива, создаваемого маршрутизатором.

Теперь каждая вкладка на моей странице будет отличаться от формы. Итак, идея состоит в том, что в действии каждой формы URL-адрес будет похож на [Controller]/[id]/[Action]. Сейчас у меня есть две формы, которые выглядят следующим образом:

<form name="personal_form" id="personal_form" method="post" action="{{ domain }}/members/profile/0/personal" class="form" role="form"> 

и

<form name="password_form" id="password_form" method="post" action="{{ domain }}/members/profile/1/password" class="form" role="form"> 

на {{домен}} часть просто так я могу вводить домен моего сайта в шаблон и использования Twig абсолютный URL. Магия в том числе в URL-адресе.

Когда вы нажимаете кнопку «Отправить», давайте скажем на password_form, которая будет второй вкладкой (вкладка index 1), маршрутизатор создает массив route_param [] с контроллером => профиль, id => 1, action = > пароль.

Тогда в моем PHP-скрипте, который является объектом действия формы, если установлен route_param ['id'], он определяет свойство tab_index объекта с этим номером идентификатора.

if (isset($this->route_params['id'])) { 
    $this->tab_index = $this->route_params['id']; 
} 

Значение по умолчанию tab_index является 0, так что если не идентификатор не находится в массиве, то tab_index останется 0.

После того как я есть, что я сделать свой шаблон Twig:

View::renderTemplate('Members/profile.twig', ['member' => $this->member, 
           'domain' => Config::DOMAIN, 
           'tab_index' => $this->tab_index]); 

Важная часть: вы видите, что я передаю номер tab_index в шаблон как tab_index.

Наконец в шаблоне я использую JQuery, чтобы показать вкладку открытой, основанной на его номер индекса:

$(document).ready(function(){ 
    $('.nav-tabs li:eq({{ tab_index }}) a').tab('show'); 
}); 

Это затем говорит вкладку начальной загрузки, чтобы показать соответствующую вкладку.

Проблема в том, что соответствующая вкладка первоначально не является открытой вкладкой. Первая вкладка открывается, когда страница загружается, а затем переключается на соответствующую вкладку. Это вызывает мерцание при переключении с одной вкладки на другую.

Можно ли этого избежать? Извините, я знаю, что было много слов, чтобы сказать немного.

+0

Возможно ли, что вы можете поделиться html и может быть jsfiddle вашей проблемы. Исправить это было бы легче ... –

+0

Конечно, дайте мне минуту, но может потребоваться некоторое объяснение. – keithmj

ответ

0

К сожалению, я идиот! Чтобы использовать вкладки начальной загрузки, вы устанавливаете область содержимого вкладки по умолчанию активной и хорошо, как сама вкладка по умолчанию. Затем, когда вы открываете веб-страницу, эта вкладка и содержимое открываются при загрузке страницы.

Итак, в моем случае по умолчанию открыта загрузка страницы, а затем переключена на ту, которую я сказал ей открыть. Когда страница загружается, вы можете видеть переключатель страницы, чего я не хотел.

Я просто взял активный класс со вкладки и содержимого, связанного с этой вкладкой. Аффект состоял в том, что при загрузке страницы не было страницы по умолчанию. Следовательно, нет переключателя табуляции от значения по умолчанию, которое я хотел. Он просто открывается к тому, что я хочу от него.

Смежные вопросы