推特引导标签:在页面重载或超链接上转到特定标签

我正在开发一个网页，其中我使用Twitter的引导框架和他们的Bootstrap标签JS。它的工作很好，除了一些小问题，其中之一是我不知道如何直接从外部链接到一个特定的选项卡。例如:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

应该分别去到Home选项卡和Notes选项卡

319309 次浏览
小开

你可以在相应的标签链接上触发click事件:

$(document).ready(function(){


if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click()
}


});
小开
最佳答案

这是我对这个问题的解决方案，可能有点晚了。但它可能会帮助其他人:

// 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;
})
小开

虽然提供的JavaScript解决方案可以工作，但我采用了稍微不同的方式，不需要额外的JavaScript，但需要视图中的逻辑。你可以用一个标准的URL参数创建一个链接，比如:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

然后你只需检测activeTab的值，在适当的<li>中写入'class="active"'

伪代码(在您的语言中相应地实现)。注意，如果本例中没有提供参数，我已经将'home'选项卡设置为默认活动。

$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>
小开

更新

对于引导3，将.on('shown', ...)更改为.on('shown.bs.tab', ....)

这是基于@dubbe答案和这个如此公认的答案。它处理了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>
小开 
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

这段来自http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768的代码对我来说很完美。

小开

我建议你使用Bootstrap作者在GitHub上的问题跟踪器上提供的代码:

var hash = location.hash
, hashPieces = hash.split('?')
, activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

你可以在这个问题的链接上找到更多关于他们为什么不选择支持它的信息。

小开

这段代码根据#散列选择正确的选项卡，并在单击选项卡时添加正确的#散列。(使用jquery)

在Coffeescript中:

$(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);
});
});
小开

下面是我所做的，非常简单，并且提供你的标签链接有一个与它们相关的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>

然后在你的url中，你可以像这样添加散列:#tab_tab1， 'tab_'部分从散列本身中删除，因此在nav-tabs (tabid1)中实际的标签链接的ID被放在后面，所以你的url看起来像:www.mydomain.com/index.php#tab_tabid1。

这对我来说是完美的，希望它能帮助其他人:-)

小开

我只是有这个问题，但需要处理多个标签级别。代码相当丑陋(见注释)，但它的工作:https://gist.github.com/JensRantil/4721860希望其他人会发现它有用(并随时提出更好的解决方案!)。

小开

@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"

小开

这是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
}
})
小开
这是我处理嵌套选项卡的解决方案。 我只是添加了一个函数来检查活动选项卡是否有一个要激活的父选项卡。 这是函数:

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);
});
这个解决方案目前对我来说很好。 希望这能对其他人有用;)

小开

这在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);
});
小开

我不太喜欢“如果……否则”;所以我采取了更简单的方法。

$(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;
})
});
  1. 选择一个默认选项卡(通常是第一个)
  2. 切换到tab(如果确实存在这样的元素;让jQuery来处理它);如果指定了错误的散列，则什么也不会发生
  3. [可选]如果手动选择了其他选项卡，则更新哈希

不处理滚动到所请求的散列;但是应该 it?

小开

我必须修改一些比特为我工作。 我使用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);
});
小开

对于引导3:

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

https://jsfiddle.net/DTcHh/6638/ < a href = " https://jsfiddle.net/DTcHh/6638/ " > < / >

小开

基于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>
小开

结合其他答案，这里有一个解决方案，可以打开许多级别的嵌套选项卡:

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

尝试了上面讨论的几种方法，最终得到了以下工作解决方案，只需在编辑器中复制并粘贴即可。要测试，只需更改哈希到收件箱，发件箱，撰写在url和按enter键。

<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>

希望这能节省你的时间。

小开

我提出了一个解决方案，使用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');
}
});
小开

我用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上的示例

小开

如果这对任何人来说都很重要，下面的代码很小，工作完美无缺，从URL中获得一个哈希值并显示:

<script>
window.onload = function () {
let url = document.location.toString();
let splitHash = url.split("#");
if (splitHash[1]) {document.getElementById(splitHash[1]).click();}
};
</script>

它所做的是检索id并触发单击事件。简单。

小开

只需在页面上插入以下代码:

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

小开

我知道这个线程非常旧，但我将在这里留下我自己的实现:

$(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-类前缀来导航链接。

小开

以Peter的回答为基础，并结合https://stackoverflow.com/a/901144/1604205，下面是JS中的代码:

<script>
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
$activetabhome = (params.activeTab === null || params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';
</script>
<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>
小开

用于引导5.1重定向到特定的选项卡

var hash = location.hash.replace(/^#/, '');
if (hash) {
var someVarName = $('.nav-tabs a[href="#' + hash + '"]');
var tab = new bootstrap.Tab(someVarName);
tab.show();
}

更改页面重新加载的散列

$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
window.scrollTo(0, 0);
})

提交答案