Bootstrap Tabs - Prevent scrolling to top

Question

This is the layout of my tabs. T1 and T2 are normal tab section. There is cascading tabs inside T3. Please find the markup below:

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#T1">Tab1</a></li>
        <li class=""><a href="#T2">Tab2</a></li>
        <li class=""><a href="#T3">Tab3</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane" id="T2">
        Tab 2 Content...
    </div>
    <div class="tab-pane" id="T3">
            <div class="tabbable tabs-left">
                    <ul class="nav nav-tabs">
                             <li class="active"><a href="#Chart" data-toggle="tab">Chart</a></li>
                                 <li><a href="#Report" data-toggle="tab">Reports</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active">
                                Chart Content...
                        </div>
                        <div class="tab-pane" style="float: right;width: 96%;">
                                Report Content...
                        </div>
                    </div>
            </div>
    </div>
</div>

The issue is while clicking on T3 the page is scrolling up. Also in the JS side i'm calling the preventDefault method as shown below:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
}

I think cascading tab inside T3 is causing the problem. How can we disable the default behavior of those tabs/links? Any thoughts on this...

Answer 1

You can use: <a data-target="#home"> instead of <a href="#home">

See here for an example: http://jsfiddle.net/RPSmedia/K9LpL/1154/

Answer 2

I fixed this by adding e.stopImmediatePropagation(); to the event handler:

$('.nav-tabs li a').click(function(e){
  e.preventDefault();
  e.stopImmediatePropagation();
  $(this).tab('show');
});