I have a page with two bootstrap tabbable. In every tabbable one tab is set to active
Here is my markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll">
<div>
<ul class="nav nav-tabs" id="tablist-1">
<li><a href="#software-tab-1" data-toggle="tab">software 1</a></li>
<li class="active"><a href="#hardware-tab-1" data-toggle="tab">hardware 1</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="software-tab-1">software 1</div>
<div class="tab-pane active" id="hardware-tab-1">hardware 1</div>
</div>
</div>
<div>
<ul class="nav nav-tabs" id="tablist-2">
<li class="active"><a href="#software-tab-2" data-toggle="tab">software 2</a></li>
<li><a href="#hardware-tab-2" data-toggle="tab">hardware 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="software-tab-2">software 2</div>
<div class="tab-pane" id="hardware-tab-2">hardware 2</div>
</div>
</div>
</body>
</html>
If the page loads, only the tab of the last tabbable is active. The active state of the first tabbable is missing.
Setting the two tabs to active with javascript also does not work.
<script>
$(document).ready(function(){
$('#tablist-1 a:first').tab('show');
$('#tablist-2 a:first').tab('show');
});
</script>
If I remove data-spy="scroll" from the body tag it works.
How to get scrollspy and multiple tabs working?
Make sure your body also has a data-target for the ScrollSpy..
<body data-spy="scroll" data-target="software-tab-1">