Create a Twitter Bootstrap 'nav-tabs' menu without changing the URL - Is it possible?

Question

I am after a nav-tab that does not involve the URL changing but obviously the tabs change and display the relevant information.

I have an angularjs site but whenever the page refreshes it take the user back to the search page. As the normal twitter bootstrap nav-tabs changes the URL I can not use this but it's something I want to do.

Questions are:

1. Does anyone know a way of doing this using the twitter bootstrap nav-tabs
2. If not, is there something else I can use which does the same

Below is cut of my code:

    <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>

Each tab will display an informational chart to the user.

Answer 1

As you said in comments url changes due to the href attribute in the <a> tag. But you can leave href blank use data-target="..." attribute instead. So

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

will be

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