Страница 1 из 1
Помогите с javascript...
Добавлено: Ср фев 22, 2017 12:40 am
Victor_S
Мужики, помогите с синтаксисом в javascript, а то я совсем не имел с ним дела...
Есть на страничке стандартный бутстраповский компонент табов. У него есть такой скриптик:
<script>
$(function () {
$('#myTab a[href="#profile"]').tab('show')
})
</script>
Как правильно подставить вместо #profile значение location.hash?
Поясню зачем, может другой путь подскажете...
На страничке несколько табов и в них есть свои формы. Они отправляют запрос на сервер, сервер обрабатывает запрос и перезагружает страницу. Нужно, чтобы при перезагрузке страницы отображалась та вкладка с которой послан запрос. Сервер указывает в адресе хэш вкладки.
Re: Помогите с javascript...
Добавлено: Ср фев 22, 2017 9:49 am
Velizar
Значение нужно подставлять не вместо #profile, а в HTML <a> теге вкладки панели, или в событии onclick какого-то из элементов вкладки.
Чтоб сделать вкладку активной (по умолчанию активная первая) нужно добавить класс
active
Код: Выделить всё
<div role="tabpanel" class="tab-pane active" id="home">...</div>
Если вы хотите активировать (посредством JavaScript) вкладку по названию - достаточно записать так:
Код: Выделить всё
$('#myTab a[href="#profile"]').tab('show'); // Виберіть вкладку по назві
Вот стандартный пример Bootstrap
Код: Выделить всё
<div role="tabpanel">
<!-- Навігаційні елементи вкладок -->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Вкладки панелі -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
Вместо трех точек можете вставлять HTML код форм
Re: Помогите с javascript...
Добавлено: Ср фев 22, 2017 12:16 pm
Victor_S
Velizar, спасибо, конечно...но все это я видел в документации и сделал. Сами вкладки нормально работают и переключаются, но при обращении к страничке по адресу с хэшем я не могу попасть на определенную вкладку именно потому что у компонента жестко задана активная вкладка. Думал, может данный скрипт в состоянии динамически переключать вкладки в зависимости от хэша в адресе...
Re: Помогите с javascript...
Добавлено: Ср фев 22, 2017 4:58 pm
Velizar
Ну а так пробовали?
Код: Выделить всё
$(document).ready(function () {
var activeTab = location.hash;
$('#myTab a[href="'+activeTab+'"]').tab('show'); // Вибір вкладки по назві
});
обязательно задайте id="myTab" в тега <ul
Re: Помогите с javascript...
Добавлено: Ср фев 22, 2017 11:08 pm
Victor_S
Методом тыка добился требуемого эффекта так:
<script>
$(function () {
var myhash = String(location.hash);
if (myhash == "#vvod1") $('#v1 a[href="#vvod1"]').tab('show');
if (myhash == "#vvod2") $('#v1 a[href="#vvod2"]').tab('show');
if (myhash == "#archive") $('#v1 a[href="#archive"]').tab('show');
if (myhash == "") $('#v1 a[href="#vvod1"]').tab('show');
})
</script>