В Bootstrap 3 я перенес панель вкладок на боковую панель.
В моем TabBar вкладки были определены как
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav nav-tabs navbar-center">
<li role="presentation" class="active"><a href="#panel_A" name="panel_A" data-toggle="tab">Panel A</a></li>
<li role="presentation" class="active"><a href="#panel_B" name="panel_B" data-toggle="tab">Panel B</a></li>
</ul>
</nav>
и для обработки изменения вкладки у меня была функция для получения активной вкладки:
function getActiveTab() {
var hash = document.location.hash;
var prefix = "tab_";
activeTab = hash.replace(prefix, "").replace("#", "");
return activeTab;
}//getActiveTab
и функция регистрации события смены вкладки:
function registerHandlerOnTabChange(activeTab, callback) {
// handle tab change
var hash = document.location.hash;
var prefix = "tab_";
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
activeTab = e.target.name;
window.location.hash = e.target.hash.replace("#", "#" + prefix);
if (typeof (callback) != 'undefined') callback.apply(this, [e]);
});
if (hash) {
activeTab = hash.replace(prefix, "");
$('.nav-tabs a[href="' + activeTab + '"]').tab('show');
}
}//registerHandlerOnTabChange
это прекрасно работает, когда вкладка изменяется, хэш URL-адреса изменится, и будет показано содержимое вкладки. Содержимое вкладки определяется именем вкладки, например
<div class="tab-content col-md-offset-0 col-md-12">
<div class="tab-pane active" id="panel_A"></div>
<div class="tab-pane" id="panel_B"></div>
</div>
Теперь при переносе на боковую панель мои вкладки на боковой панели выглядят как
<ul class="nav nav-pills nav-stacked">
<ul >
<li class="active" role="presentation" ><a href="#panel_A" name="panel_A" data-toggle="tab">Panel A</a></li>
<li class="" role="presentation" ><a href="#panel_B" name="panel_B" data-toggle="tab">Panel B</a></li>
</ul>
</ul>
Чтобы заставить его работать, мне пришлось изменить селектор с nav-tabs
на nav-pills
.
$('.nav-tabs a[href="' + activeTab + '"]').tab('show');
до
$('.nav-pills a[href="' + activeTab + '"]').tab('show');
Я утверждаю, что это не может быть правильным способом обработки элементов панели вкладок в панели вкладок. Есть ли лучший выбор?