如何在单击使用 jQuery 的特定链接时打开引导程序导航选项卡的特定选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19589053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
提问by sachin_ware
I am new to jquery and bootstrap,so please consider my mistakes.I have created a bootstrap modal for login and registration. It contains two nav-tabs called as login and registration.I have two buttons that popup the same Modal window, but display a different tab inside the Modal window. In each tab is a form with a number of inputs. My issue is getting the modal popped up with login tab opened in the modal when i click on the 'login' button and registration tab opened when i click on the 'register' button on my page.
我是 jquery 和 bootstrap 的新手，所以请考虑我的错误。我创建了一个用于登录和注册的引导模式。它包含两个称为登录和注册的导航选项卡。我有两个按钮可以弹出同一个模态窗口，但在模态窗口内显示不同的选项卡。在每个选项卡中都有一个包含多个输入的表单。我的问题是当我单击“登录”按钮时弹出模态并在模态中打开登录选项卡，当我单击页面上的“注册”按钮时打开注册选项卡。
These are 2 links on which the modal opens:
这些是模式打开的 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>
Here is my code of tabs and their contents(i am avoiding unnecessary code here):
这是我的选项卡代码及其内容（我在这里避免使用不必要的代码）：
<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 -->
I think this can be done through jquery easily.But i dont know exactly how to do it. So,please can anyone help me to solve my problem.Thank you in advance ?
我认为这可以通过 jquery 轻松完成。但我不知道该怎么做。所以，请谁能帮我解决我的问题。提前谢谢你？
回答by Sridhar R
Applying a selector from the .nav-tabs seems to be working
从 .nav-tabs 应用选择器似乎有效
HTMLis
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>
Scriptis
脚本是
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
回答by Rach
HTML:
HTML：
<a href="PageName.php#tabID">link to other page tab</a>
Javascript:
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;
});
}
回答by Nikunj K.
You may access through tab Id as well, But that id is unique for same page. Here is an example for same
您也可以通过标签 ID 访问，但该 ID 对于同一页面是唯一的。这是相同的示例
$('#product_detail').tab('show');
In above example #product_detailsis navtabid
在上面的例子中#product_details是navtabid
回答by TheJoempossible
Hi Try this one folks!
嗨，试试这个人！
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
// save current clicked tab in local storage does not work in Stacksnippets
// localStorage.setItem('lastActiveTab', $(this).attr('href'));
});
//get last active tab from local storage
var lastTab = "#profile"; // localStorage.getItem('lastActiveTab');
console.log(lastTab + "tab was last active")
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}<link rel="stylesheet" href="https://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="https://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">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Message</div>
<div role="tabpanel" class="tab-pane" id="settings">Settings</div>
</div>
</div>
</div>回答by sachin_ware
Thanks for above answer , here is my jQuery code that is working now:
感谢上面的回答，这是我现在正在运行的 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');
};
回答by Zachary Heaton
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');
}
回答by Laura Gargiulo
May I suggest a php+css solution I used on my site? It's simple and no js problems :)
我可以建议我在我的网站上使用的 php+css 解决方案吗？这很简单，没有js问题:)
url to page: <a href="page.php?tab=menu1">link to menu1</a>
网址到页面： <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>
回答by Mars Robertson
Not sure if I understood correctly but here is snippet that I use to open links from Bootstrap tab menu:
不确定我是否理解正确，但这里是我用来从 Bootstrap 选项卡菜单打开链接的片段：
HTML
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
Javascript
$('.nav a:not(".external")').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
