如何打开特定的标签引导导航标签点击一个特定的链接使用 jQuery？

小开

最佳答案

应用. nav-tab 中的选择器似乎是有效的

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');
};

Http://jsfiddle.net/pthn6/80/

小开

感谢上面的回答，下面是我的 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');
};

小开

不确定我是否理解正确，但这里有一段我用于 从 Bootstrap 选项卡菜单打开链接的片段:

超文本标示语言

<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')
})

小开

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;
});
}

小开

我可以建议一个 php + css 解决方案，我在我的网站上使用？它很简单，没有 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>

小开

您也可以通过 tab ID 进行访问，但该 Id 对于同一页是唯一的。这里有一个相同的例子

$('#product_detail').tab('show');

在上面的例子中，#product_details是 nav tab id

小开

嗨，试试这个，伙计们！

$('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>

小开

    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');
}

小开

我写了这个片段用来处理这个案子。

它是用普通的 javascript 编写的，因此也适用于 bootsrap5没有 jQuery 的情况。

<script type='text/javascript'>
window.onhashchange=hashTriggerTab;
window.onload=hashTriggerTab;
    

function hashTriggerTab(){
var current_hash=window.location.hash;
if(current_hash.substring(0,1)=='#')current_hash=current_hash.substring(1);
if(current_hash!=''){
var trigger=document.querySelector('.nav-tabs a[href="#'+current_hash+'"]');
if(trigger)trigger.click();
}
}
</script>

有了这个，你就可以在同一个页面上链接两者，比如:

<a href='#tabId'>Link Any Tab</a>

或从外部网页，如:

<a href='newpage.php#tabId'>Link From External</a>