Twitter Bootstrap选项卡：转到页面重新加载或超链接上的特定选项卡
我正在开发一个网页，我正在使用Twitter的Bootstrap框架和他们的Bootstrap标签JS 。 除了一些小问题外，它的效果很好，其中之一是我不知道如何直接从外部链接直接访问特定的选项卡。 例如：
<a href="facility.php#home">Home</a> <a href="facility.php#notes">Notes</a> 当点击外部页面的链接时，应该分别转到“主页”选项卡和“备注”选项卡
这是我对这个问题的解决办法，可能有点晚了。 但也许可以帮助其他人：
// Javascript to enable link to tab 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').on('shown.bs.tab', function (e) { window.location.hash = e.target.hash; })
UPDATE
对于Bootstrap 3，将.on('shown', ...)更改为.on('shown.bs.tab', ....)
这是基于@dubbe回答，这是SO接受的答案 。 它处理与window.scrollTo(0,0)无法正常工作的问题。 问题是，当您replace显示的选项卡上的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>
您可以在相应的选项卡链接上触发click事件：
$(document).ready(function(){ if(window.location.hash != "") { $('a[href="' + window.location.hash + '"]').click() } });
这是防止滚动的杜比解决scheme的改进实现。
// 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 } })
虽然提供的JavaScript解决scheme可能工作，我采取了一个稍微不同的方式，不需要额外的JavaScript，但需要逻辑在您的看法。 您使用标准url参数创build链接，如：
<a href = "http://link.to.yourpage?activeTab=home">My Link</a>
然后，您只需在相应的<li>检测activeTab的值以写入“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>
对于Bootstrap 3：
$('.nav-tabs a[href="#' + tabID + '"]').tab('show');
这在Bootstrap 3中起作用，通过集成GarciaWebDev的答案（它允许哈希后的url参数并直接从github问题跟踪器上的Bootstrap作者）改进了dubbe和flynfish的2个最佳答案：
// 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; }) });
- select一个默认选项卡（通常是第一个）
- 切换到选项卡（如果这样的元素确实存在;让jQuery处理它）; 如果指定了错误的散列，则什么也不会发生
- [可选]如果手动select另一个选项卡，则更新散列
不解决滚动到请求的散列; 但应该吗？
此代码根据#hashselect正确的选项卡，并在单击选项卡时添加右侧的#hash。 （这使用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); }); });
@flynfish + @ Ztyx解决scheme，用于嵌套选项卡：
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 =“嵌套”
$(function(){ var hash = window.location.hash; hash && $('ul.nav a[href="' + hash + '"]').tab('show'); });
这个来自http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768的代码为我完美地工作。;
我build议你在GitHub的问题跟踪器上使用Bootstrap作者提供的代码：
var hash = location.hash , hashPieces = hash.split('?') , activeTab = $('[href=' + hashPieces[0] + ']'); activeTab && activeTab.tab('show');
你可以在这个问题的链接上find更多关于他们为什么不select支持的信息。
感谢您分享您的观点。
通过阅读所有的解决scheme。 我想出了一个解决scheme，使用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'); } });
这是我所做的，非常简单，并提供您的标签链接有一个ID与他们关联，你可以得到HREF属性，并传递给显示标签内容的function：
<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_'部分被从哈希本身删除，所以实际的标签链接在导航标签（tabid1）的ID放在这之后，所以你的url如下所示：www.mydomain.com/index.php#tab_tabid1。
这对我来说是完美的，希望它可以帮助别人:-)
以Demircan Celebi的解决scheme为基础; 我希望在修改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>
这是我处理嵌套选项卡的解决scheme。 我刚刚添加了一个函数来检查活动选项卡是否有一个父标签被激活。 这是function：
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的解决scheme）：
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); });
目前这个解决scheme对我来说很好。 希望这对其他人有用;）
我不得不修改一些这个为我工作。 我正在使用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); });
尝试了上面讨论的两种方法，并最终得到下面的工作解决scheme，只需复制并粘贴到您的编辑器尝试。 要testing只是改变哈希到收件箱，发件箱，在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>
希望这会节省你的时间。
我只是有这个问题，但需要处理多个选项卡级别。 代码是相当丑陋的（见评论），但它的工作： https : //gist.github.com/JensRantil/4721860希望别人会觉得它有用（并随时提出更好的解决scheme！）。
结合其他答案peices，这里是一个解决scheme，可以打开多层次的嵌套选项卡：
// 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'); }
