Создать меню Twitter-Bootstrap "nav-tabs" без изменения URL-адреса. Возможно ли это?

Я после nav-tab, который не связан с изменением URL-адреса, но, очевидно, вкладки меняются и отображают соответствующую информацию.

У меня есть сайт angularjs, но всякий раз, когда страница обновляется, пользователь возвращается на страницу поиска. Поскольку обычный загрузочный твиттер nav-tabs изменяет URL-адрес, я не могу его использовать, но это то, что я хочу сделать.

Вопросы:

  • Кто-нибудь знает способ сделать это, используя twitter bootstrap nav-tabs
  • Если нет, есть ли что-то еще, что я могу использовать, что делает тот же

Ниже вырезано моего кода:

    <div class="row" data-ng-if="showcharts">
    <div class="col-md-12">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#productBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">Product breakdown</span></a></li>
            <li role="presentation" style="border-right: 1px solid lightgray; border-left: 1px solid lightgray"><a href="#assetsBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">Assets Breakdown</span></a></li>
            <li role="presentation"><a href="#nbBreakdown" role="tab" data-toggle="tab"><span class="tabHeadings">New Business Breakdown</span></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="productBreakdown">
                <donutchart id="product-breakdown" data-options="productbreakdownchart"></donutchart>
            </div>
            <div role="tabpanel" class="tab-pane" id="assetsBreakdown">
                <donutchart id="asset-breakdown" data-options="assetbreakdownchart"></donutchart>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">TO BE ADDED</div>
        </div>
    </div>
</div>

Каждая вкладка отобразит пользователю информационную диаграмму.

Ответы

Ответ 1

Как вы сказали в комментариях, url изменяется из-за атрибута href в теге <a>. Но вместо этого вы можете оставить href пустой атрибут data-target="...". Так

<a href="#productBreakdown" role="tab" data-toggle="tab"></a>

будет

<a href data-target="#productBreakdown" role="tab" data-toggle="tab"></a>

Ответ 2

Я думаю, что я делаю правильно, как вы предложили, но я не могу заставить его работать! Вы знаете, что это не так?

<div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                  <a href data-target="#uploadTab"  role="tab" data-toggle="tab">Upload</a>
                </li>
                <li role="presentation">
                  <a href data-target="#browseTab"  role="tab" data-toggle="tab">Browse</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="uploadTab">upload Tab</div>
                <div role="tabpanel" class="tab-pane" id="browseTab">browseTab</div>
            </div>
        </div>