如何打开特定的引导程序导航选项卡的标签点击一个particuler链接使用jQuery？
我是jquery和bootstrap的新手，所以请考虑我的错误。我创build了一个用于login和注册的引导模式。 它包含两个称为login和注册的导航选项卡。我有两个buttonpopup相同的模态窗口，但在模态窗口内显示不同的选项卡。 在每个选项卡中是一个具有多个input的表单。 我的问题是得到的模式popuplogin选项卡中打开的模式，当我点击“login”button和注册选项卡打开时，我点击我的网页上的“注册”button。
这些是模式打开的2个链接：
<div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;"> <a data-toggle="modal" href="#regestration" class="header-register-a" > <big> <font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font> </big></a></div> <div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;"> <a data-toggle="modal" href="#regestration" class="header-register-a" > <big> <font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font> </big></a> 这里是我的代码标签和他们的内容（我在这里避免不必要的代码）：
<div class="tabbable" > <ul class="nav nav-tabs" ><!--tabs--> <li class="active" style="position:absolute;margin-left:0px;" id="logintab"> <a href="#pane_login" data-toggle="tab">Login</a></li> <li style="margin-left:70px;" id="reg_tab" ><a href="#pane_reg" data-toggle="tab">Registration</a></li> </ul> <div class="tab-content"><!--login tab content--> <div id="pane_login" class="tab-pane active"> <form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form"> </form> </div><!--/pane_login--> <div id="pane_reg" class="tab-pane"><!--registration tab content--> <form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form"> </form> </div> </div><!-- /.tab-content --> </div><!-- /.tabbable -->
我认为这可以通过jQuery容易地完成，但我不知道如何做到这一点。 所以，请有谁能帮我解决我的问题。谢谢你提前？
从.nav选项卡应用select器似乎正在工作
HTML是
<ul class="nav nav-tabs"> <li><a href="#aaa" data-toggle="tab">AAA</a></li> <li><a href="#bbb" data-toggle="tab">BBB</a></li> <li><a href="#ccc" data-toggle="tab">CCC</a></li> </ul> <div class="tab-content" id="tabs"> <div class="tab-pane" id="aaa">...Content...</div> <div class="tab-pane" id="bbb">...Content...</div> <div class="tab-pane" id="ccc">...Content...</div> </div>
脚本是
$(document).ready(function(){ activaTab('aaa'); }); function activaTab(tab){ $('.nav-tabs a[href="#' + tab + '"]').tab('show'); };
HTML：
<a href="PageName.php#tabID">link to other page tab</a>
使用Javascript：
window.onload = function(){ var url = document.location.toString(); if (url.match('#')) { $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show'); } //Change hash for page-reload $('.nav-tabs a[href=#' + url.split('#')[1] + ']').on('shown', function (e) { window.location.hash = e.target.hash; }); }
您也可以通过标签ID进行访问，但是该ID对于同一页面是唯一的。 这里是一个例子
$('#product_detail').tab('show');
在上面的例子中#product_details是nav tab ID
感谢上面的答案，这里是我现在正在工作的jQuery代码：
$(".header-login-li").click(function(){ activaTab('pane_login'); }); $(".header-register-li").click(function(){ activaTab('pane_reg'); $("#reg_log_modal_header_text").css() }); function activaTab(tab){ $('.nav-tabs a[href="#' + tab + '"]').tab('show'); };
我可以build议我的网站上使用的PHP + CSS解决scheme吗？ 这很简单，没有js问题:)
链接到页面： <a href="page.php?tab=menu1">link to menu1</a>
<? $tab = $_GET['tab']; ?> <ul class="nav nav-tabs"> <li class="<? if ($tab=='menu1' OR $tab=='menu2') { echo ""; } else { echo "active"; } ?>"><a data-toggle="tab" href="#home">Prodotti</a></li> <li class="<? if ($tab=='menu1') { echo "active"; } ?>"><a data-toggle="tab" href="#menu1">News</a></li> <li class="<? if ($tab=='menu2') { echo "active"; } ?>"><a data-toggle="tab" href="#menu2">Gallery</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade <? if ($tab=='menu1' OR $tab=='menu2') { echo ""; } else { echo "in active"; } ?> "> <h3>Prodotti</h3> <p>Contenuto della pagina, zona prodotti</p> </div> <div id="menu1" class="tab-pane fade <? if ($tab=='menu1') { echo "in active"; } ?>"> <h3>News</h3> <p>Qui ci saranno le news.</p> </div> <div id="menu2" class="tab-pane fade <? if ($tab=='menu2') { echo "in active"; } ?>"> <h3>Gallery</h3> <p>Qui ci sarà la gallery</p> </div> </div>
嗨尝试这一个人！
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // save current clicked tab in local storage localStorage.setItem('lastActiveTab', $(this).attr('href')); }); //get last active tab from local storage var lastTab = localStorage.getItem('lastActiveTab'); alert(lastTab +"tab was last active") if (lastTab) { $('[href="' + lastTab + '"]').tab('show'); }
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div> </div>
function updateURL(url_params) { if (history.pushState) { var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + url_params; window.history.replaceState({path:newurl},'',newurl); } } function setActiveTab(tab) { $('.nav-tabs li').removeClass('active'); $('.tab-content .tab-pane').removeClass('active'); $('a[href="#tab-' + tab + '"]').closest('li').addClass('active'); $('#tab-' + tab).addClass('active'); } // Set active tab $url_params = new URLSearchParams(window.location.search); // Get active tab and remember it $('a[data-toggle="tab"]') .on('click', function() { $href = $(this).attr('href') $active_tab = $href.replace('#tab-', ''); $url_params.set('tab', $active_tab); updateURL($url_params.toString()); }); if ($url_params.has('tab')) { $tab = $url_params.get('tab'); $tab = '#tab-' + $tab; $myTab = JSON.stringify($tab); $thisTab = $('.nav-tabs a[href=' + $myTab +']'); $('.nav-tabs a[href=' + $myTab +']').tab('show'); }
不知道我是否理解正确，但这里是我用来打开链接从引导标签菜单中的代码片段：
HTML
<ul class="nav nav-tabs"> <li class="active"><a href="#foo" data-toggle="tab">Foo</a></li> <li><a href="#bar" data-toggle="tab">Bar</a></li> <li><a href="baz.html" class="external">Baz</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="foo">Foo</div> <div class="tab-pane" id="bar">Bar</div> </div>
使用Javascript
$('.nav a:not(".external")').click(function (e) { e.preventDefault() $(this).tab('show') })
