javascript - How to link Bootstrap Tabs Dropdown list to URL -
my dropdown list within twitter bootstrap tab not doing when click it. have searched possible solutions on stackoverflow still did not work me. removed data-toggle='tab' already.
fyi - i'm using twitter bootstrap 3.0
see code below:
<ul class="nav nav-tabs case-detail-nav" id="mytab"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#">text files<b class="caret"></b></a> <ul class="dropdown-menu" role="menu"> <li><a href='http://www.google.com/'>google</a></li> </ul> </li> <li class="active"><a href="#general">general</a></li> </ul>
see javascript:
<script> $(function () { $('#mytab a:last').tab('show') }) $('#mytab a').click(function (e) { e.preventdefault() $(this).tab('show') }) </script>
much appreciated!
your issue preventdefault
on anchor click, dont want 1 in dropdown . check before preventing default. preventdefault()
prevent default behavior of anchor , when try show $(this).tab('show')
bootstrap take href selector select element display tab (which cause error in jquery sizzle due invalid chars in selector).
$('#mytab a').click(function (e) { if (!$(this).closest('.dropdown-menu').length) { //check if dropdown e.preventdefault(); $(this).tab('show'); } });
or target real tab triggers.
$('#mytab > li > a').click(function (e) { e.preventdefault(); $(this).tab('show'); });
Comments
Post a Comment