When I click on "Tools" tab, nothing happens: tabs don't switches, not toggles.
$('[data-toggle="tab"]').click(function(e) { var $this = $(this), loadurl = $this.attr('href'); $.get(loadurl, function(data) { $('#content').html(data); }); $this.tab('show'); return false; });
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"/> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <ul class="nav nav-tabs nav-justified" role="tablist"> <li role="navigation" class="active"><a href="/engine/ajax/main.php" aria-controls="main" role="tab" data-toggle="tab">My links</a></li> <li role="navigation"><a href="#tools" aria-controls="stat" role="tab" data-toggle="tab">Statistics</a></li> <li role="navigation"><a href="/engine/ajax/tools.php" aria-controls="tools" role="tab" data-toggle="tab">Tools</a></li> <li role="navigation"><a href="#payments" aria-controls="payments" role="tab" data-toggle="tab">Payments</a></li> </ul> </div> <div id="content" class="container"> </div>
Where I am wrong?
Put
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
before
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
like this:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
bootstrap.min.js requires jquery.min.js to run first before it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.