我正在开发一个网页，我在其中使用 Twitter 的 Bootstrap Framework 和他们的Bootstrap Tabs JS。除了一些小问题外，它工作得很好，其中一个是我不知道如何从外部链接直接转到特定选项卡。例如：
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
单击外部页面的链接时，应分别转到“主页”选项卡和“注释”选项卡
问问题
310770 次
24 回答
657
这是我对这个问题的解决方案，也许有点晚了。但它也许可以帮助其他人：
// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
$('.nav-tabs a[href="#' + hash + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
于 2012-02-22T11:18:35.730 回答
217
更新
对于 Bootstrap 3，更改.on('shown', ...)为.on('shown.bs.tab', ....)
这是基于@dubbe答案和这个SO 接受的答案。它处理window.scrollTo(0,0)无法正常工作的问题。问题是，当您替换显示的选项卡上的 url 哈希时，浏览器将滚动到该哈希，因为它是页面上的一个元素。为了解决这个问题，添加一个前缀，这样哈希就不会引用实际的页面元素
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
使用示例
如果您有 id="mytab" 的选项卡窗格，则需要像这样放置链接：
<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>
于 2012-05-28T16:30:57.770 回答
58
click您可以在相应的选项卡链接上触发事件：
$(document).ready(function(){
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click()
}
});
于 2011-10-22T20:34:07.630 回答
46
这是 dubbe 防止滚动的解决方案的改进实现。
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
}
// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
if(history.pushState) {
history.pushState(null, null, e.target.hash);
} else {
window.location.hash = e.target.hash; //Polyfill for old browsers
}
})
于 2013-07-09T15:39:47.567 回答
21
虽然提供的 JavaScript 解决方案可能有效，但我采用了一种稍微不同的方式，不需要额外的 JavaScript，但在您的视图中确实需要逻辑。您使用标准 URL 参数创建链接，例如：
<a href = "http://link.to.yourpage?activeTab=home">My Link</a>
然后你只需检测 activeTab 的值，在适当的地方写上 'class="active"'<li>
伪代码（用您的语言相应地实现）。注意如果本例中没有提供参数，我已将“主页”选项卡设置为默认活动。
$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';
<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>
于 2012-02-25T04:13:18.230 回答
10
我不是 if...else 的忠实粉丝；所以我采取了一种更简单的方法。
$(document).ready(function(event) {
$('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
$('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
$('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) { // Update the location hash to current tab
window.location.hash= event.target.hash;
})
});
- 选择一个默认选项卡（通常是第一个）
- 切换到选项卡（如果确实存在这样的元素；让 jQuery 处理它）；如果指定了错误的哈希，则不会发生任何事情
- [可选] 如果手动选择另一个选项卡，则更新哈希
不解决滚动到请求的哈希；但应该吗？
于 2014-01-17T12:09:27.487 回答
10
于 2015-04-15T03:49:19.680 回答
8
这在 Bootstrap 3 中有效，并通过集成 GarciaWebDev 的答案来改进 dubbe 和 flynfish 的 2 个最佳答案（它允许哈希后的 url 参数，并且直接来自 github 问题跟踪器上的 Bootstrap 作者）：
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
hash = hash.replace(prefix,'');
var hashPieces = hash.split('?');
activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
于 2013-09-05T04:23:46.793 回答
8
基于 Demircan Celebi 的解决方案；我希望在修改 url 并打开选项卡时打开选项卡，而不必从服务器重新加载页面。
<script type="text/javascript">
$(function() {
openTabHash(); // for the initial page load
window.addEventListener("hashchange", openTabHash, false); // for later changes to url
});
function openTabHash()
{
console.log('openTabHash');
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
}
// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
if(history.pushState) {
history.pushState(null, null, e.target.hash);
} else {
window.location.hash = e.target.hash; //Polyfill for old browsers
}
})
}
</script>
于 2015-09-16T18:02:27.697 回答
6
此代码根据#hash 选择正确的选项卡，并在单击选项卡时添加正确的#hash。（这使用jquery）
在咖啡脚本中：
$(document).ready ->
if location.hash != ''
$('a[href="'+location.hash+'"]').tab('show')
$('a[data-toggle="tab"]').on 'shown', (e) ->
location.hash = $(e.target).attr('href').substr(1)
或在 JS 中：
$(document).ready(function() {
if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
return $('a[data-toggle="tab"]').on('shown', function(e) {
return location.hash = $(e.target).attr('href').substr(1);
});
});
于 2012-11-15T12:34:16.640 回答
5
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});
来自http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768的这段代码非常适合我。
于 2012-08-10T09:55:39.810 回答
5
我用于嵌套选项卡的@flynfish + @Ztyx 解决方案：
handleTabLinks();
function handleTabLinks() {
if(window.location.hash == '') {
window.location.hash = window.location.hash + '#_';
}
var hash = window.location.hash.split('#')[1];
var prefix = '_';
var hpieces = hash.split('/');
for (var i=0;i<hpieces.length;i++) {
var domelid = hpieces[i].replace(prefix,'');
var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
if (domitem.length > 0) {
domitem.tab('show');
}
}
$('a[data-toggle=tab]').on('shown', function (e) {
if ($(this).hasClass('nested')) {
var nested = window.location.hash.split('/');
window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
} else {
window.location.hash = e.target.hash.replace('#', '#' + prefix);
}
});
}
孩子们应该有 class="nested"
于 2013-02-25T04:34:09.373 回答
5
我想出了一个使用 url 哈希或 localStorage 的解决方案，具体取决于后者的可用性，代码如下：
$(function(){
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
})
var hash = window.location.hash;
var activeTab = localStorage.getItem('activeTab');
if(hash){
$('#project-tabs a[href="' + hash + '"]').tab('show');
}else if (activeTab){
$('#project-tabs a[href="' + activeTab + '"]').tab('show');
}
});
于 2017-02-07T19:01:27.377 回答
4
我建议您使用 Bootstrap 作者在 GitHub 上的问题跟踪器上提供的代码：
var hash = location.hash
, hashPieces = hash.split('?')
, activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
您可以在该问题的链接上找到有关他们为何不选择支持该问题的更多信息。
于 2012-10-16T21:45:17.527 回答
4
尝试了上面讨论的几种方法并最终得到以下工作解决方案，只需复制并粘贴到您的编辑器中即可尝试。要测试只需将哈希更改为收件箱、发件箱、在 url 中撰写并按回车键。
<html>
<head>
<link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container body-content">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
<li><a data-toggle="tab" href="#outbox">Outbox</a></li>
<li><a data-toggle="tab" href="#compose">Compose</a></li>
</ul>
<div class="tab-content">
<div id="inbox" class="tab-pane fade in active">
Inbox Content
</div>
<div id="outbox" class="tab-pane fade">
Outbox Content
</div>
<div id="compose" class="tab-pane fade">
Compose Content
</div>
</div>
</div>
<script>
$(function () {
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});
</script>
</body>
</html>
希望这会节省您的时间。
于 2016-01-29T05:57:58.113 回答
3
这是我所做的，非常简单，并且如果您的选项卡链接具有与之关联的 ID，您可以获得 href 属性并将其传递给显示选项卡内容的函数：
<script type="text/javascript">
jQuery(document).ready(function() {
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
var tab = jQuery(hash.replace(prefix,"")).attr('href');
jQuery('.nav-tabs a[href='+tab+']').tab('show');
}
});
</script>
然后在您的网址中，您可以将哈希添加为：#tab_tab1，“tab_”部分已从哈希本身中删除，因此导航选项卡（tabid1）中实际选项卡链接的 ID 放置在此之后，因此您的url 看起来像：www.mydomain.com/index.php#tab_tabid1。
这对我来说很完美，希望它可以帮助别人:-)
于 2013-01-19T14:13:54.373 回答
3
只需在您的页面上插入此代码：
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});于 2019-04-04T07:41:36.217 回答
2
这是我处理嵌套选项卡的解决方案。我刚刚添加了一个功能来检查活动选项卡是否有要激活的父选项卡。这是功能：
function activateParentTab(tab) {
$('.tab-pane').each(function() {
var cur_tab = $(this);
if ( $(this).find('#' + tab).length > 0 ) {
$('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
return false;
}
});
}
并且可以这样调用（基于@flynfish的解决方案）：
var hash = document.location.hash;
var prefix = "";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
activateParentTab(hash);
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
目前，这个解决方案对我来说效果很好。希望这对其他人有用；）
于 2013-07-14T00:36:48.100 回答
2
我必须修改一些位才能为我工作。我正在使用 Bootstrap 3 和 jQuery 2
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
hash = hash.replace(prefix,'');
var hashPieces = hash.split('?');
activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
于 2015-01-23T14:25:26.450 回答
1
我刚遇到这个问题，但需要处理多个选项卡级别。代码相当丑陋（见评论），但它的工作：https ://gist.github.com/JensRantil/4721860希望其他人会发现它有用（并随时提出更好的解决方案！）。
于 2013-02-06T10:51:18.813 回答
1
结合其他答案的部分，这是一个可以打开多层嵌套选项卡的解决方案：
// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
var $link = $('[href=' + hash + ']');
var parents = $link.parents('.tab-pane').get();
$(parents.reverse()).each(function() {
$('[href=#' + this.id + ']').tab('show') ;
});
$link.tab('show');
}
于 2016-01-15T19:50:09.183 回答
1
如果它对任何人都很重要，那么以下代码很小并且可以完美运行，从 URL 中获取单个哈希值并显示：
<script>
window.onload = function () {
let url = document.location.toString();
let splitHash = url.split("#");
document.getElementById(splitHash[1]).click();
};
</script>
它的作用是检索 id 并触发 click 事件。简单的。
于 2018-09-07T13:38:08.453 回答
0
我为带有 ajax 的链接#!#（例如/test.com#!#test3）做这样的事情，但你可以随意修改它
$(document).ready(function() {
let hash = document.location.hash;
let prefix = "!#";
//change hash url on page reload
if (hash) {
$('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
}
// change hash url on switch tab
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
});
Github上的简单页面示例
于 2018-03-05T09:38:25.110 回答
0
我知道这个线程很老，但我会在这里留下我自己的实现：
$(function () {
// some initialization code
addTabBehavior()
})
// Initialize events and change tab on first page load.
function addTabBehavior() {
$('.nav-tabs a').on('show.bs.tab', e => {
window.location.hash = e.target.hash.replace('nav-', '')
})
$(window).on('popstate', e => {
changeTab()
})
changeTab()
}
// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
const hash = getUrlHash()
if (hash) {
$(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
} else {
$('.nav-tabs a').first().tab('show')
}
}
// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
return window.location.hash.slice(1)
}
请注意，我使用nav-类前缀来导航链接。
于 2019-05-07T20:07:15.440 回答