Bootstrap Tabs - Prevent scrolling to top
javascript, jquery, tabs, twitter-bootstrap
Solution
You can use: `<a data-target="#home">` instead of `<a href="#home">`
See here for an example: http://jsfiddle.net/RPSmedia/K9LpL/1154/
Problem
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...