Boostrap 3 портирование TabBar на боковую панель

Question

В 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');

Я утверждаю, что это не может быть правильным способом обработки элементов панели вкладок в панели вкладок. Есть ли лучший выбор?