PROSAGA码农传奇-go-Twitter Bootstrap选项卡：转到页面重新加载或超链接上的特定选项卡

21 条回复

0#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 此代码根据#hash选择正确的选项卡，并在单击选项卡时添加正确的#hash。（这使用jquery） </p> <P> 在Coffeescript中： </p> <pre> <code> $(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) </code> </pre> <P> 或者在JS中： </p> <pre> <code> $(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); }); }); </code> </pre> </DIV>

编辑
1#
回复此人
子阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> UPDATE </强> </p> <P> 对于Bootstrap 3，请更改 <code> .on('shown', ...) </code> 至 <code> .on('shown.bs.tab', ....) </code> </p> <HR /> <P> 这是基于 <a href="https://stackoverflow.com/a/9393768/662581"> @dubbe </A> 回答这个 <a href="https://stackoverflow.com/a/1511522/662581"> SO接受了答案 </A> 。它处理问题 <code> window.scrollTo(0,0) </code> 工作不正常。问题是，当您在显示的选项卡上替换url hash时，浏览器将滚动到该哈希，因为它是页面上的元素。要解决此问题，请添加前缀，以便哈希不引用实际的页面元素 </p> <pre> <code> // 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); }); </code> </pre> <P> 的<strong> 使用示例 </强> </p> <P> 如果你有id =“mytab”的标签窗格，你需要把你的链接放在这样： </p> <pre> <code> <a href="yoursite.com/#tab_mytab">Go to Specific Tab </a> </code> </pre> </DIV>

编辑
2#
回复此人
哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 虽然提供的JavaScript解决方案可能有效，但我采用了略微不同的方式，不需要额外的JavaScript，但在视图中需要逻辑。您可以使用标准URL参数创建链接，例如： </p> <pre> <code> <a href = "http://link.to.yourpage?activeTab=home">My Link</a> </code> </pre> <P> 然后你只需要检测activeTab的值，在适当的位置写'class =“active”' <code> <li> </code> </p> <P> 伪代码（用你的语言相应地实现）。注意如果此示例中未提供参数，我将“home”选项卡设置为默认活动。 </p> <pre> <code> $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> </code> </pre> </DIV>

编辑
3#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以触发一个 <code> click </code> 相应标签链接上的事件： </p> <pre> <code> $(document).ready(function(){ if(window.location.hash != "") { $('a[href="' + window.location.hash + '"]').click() } }); </code> </pre> </DIV>

编辑
4#
回复此人
一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 感谢您分享您的观点。 </p> <P> 通过阅读所有解决方案。我想出了一个使用url hash或localStorage的解决方案，具体取决于后者的可用性，代码如下： </p> <pre> <code> $(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'); } }); </code> </pre> </DIV>

编辑
5#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我建议你使用Bootstrap作者提供的代码 <a href="https://github.com/twbs/bootstrap/issues/2415" rel="nofollow"> 在GitHub上发布跟踪器 </A> ： </p> <pre> <code> var hash = location.hash , hashPieces = hash.split('?') , activeTab = $('[href=' + hashPieces[0] + ']'); activeTab && activeTab.tab('show'); </code> </pre> <P> 您可以在问题的链接上找到有关他们为什么不选择支持该问题的更多信息。 </p> </DIV>

编辑
6#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果......别的我不是很喜欢的;所以我采取了一种更简单的方法。 </p> <pre> <code> $(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; }) }); </code> </pre> <OL> <LI> 选择默认选项卡（通常是第一个） </LI> <LI> 切换到选项卡（如果确实存在这样的元素;让jQuery处理它）;如果指定了错误的哈希，则没有任何反应 </LI> <LI> [可选]如果手动选择另一个选项卡，则更新哈希 </LI> </醇> <P> 不解决滚动到请求的哈希;但的<strong> 应该 </强> 它？ </p> </DIV>

编辑
7#
回复此人
那年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于Bootstrap 3： </p> <pre> <code> $('.nav-tabs a[href="#' + tabID + '"]').tab('show'); </code> </pre> <P> <a href="https://jsfiddle.net/DTcHh/6638/"> https://jsfiddle.net/DTcHh/6638/ </A> </p> </DIV>

编辑
8#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以Demircan Celebi的解决方案为基础;我希望在修改URL和打开选项卡时打开选项卡，而无需从服务器重新加载页面。 </p> <pre> <code> <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> </code> </pre> </DIV>

编辑
9#
回复此人
那月静好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我不得不修改一些比特来为我工作。我正在使用Bootstrap 3和jQuery 2 </p> <pre> <code> // 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); }); </code> </pre> </DIV>

编辑
10#
回复此人
夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果它对任何人都很重要，那么以下代码很小并且可以完美无缺，从URL获取单个哈希值并显示： </p> <pre> <code> <script> window.onload = function () { let url = document.location.toString(); let splitHash = url.split("#"); document.getElementById(splitHash[1]).click(); }; </script> </code> </pre> <P> 它的作用是检索id并触发click事件。简单。 </p> </DIV>

编辑
11#
回复此人
生如夏花 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> $(function(){ var hash = window.location.hash; hash && $('ul.nav a[href="' + hash + '"]').tab('show'); }); </code> </pre> <P> 这段代码来自 <a href="http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768" rel="noreferrer"> http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 </A> 完美地为我工作。 </p> </DIV>

编辑
12#
回复此人
部落用户 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 尝试了上面讨论过的几种方法并最终得到以下工作解决方案，只需复制并粘贴到您的编辑器中即可尝试。要测试只是将哈希更改为收件箱，发件箱，请在网址中撰写并按Enter键。 </p> <pre> <code> <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> </code> </pre> <P> 希望这会节省你的时间。 </p> </DIV>

编辑
13#
回复此人
妖邪 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 结合其他答案中的peices，这是一个可以打开多层嵌套选项卡的解决方案： </p> <pre> <code> // 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'); } </code> </pre> </DIV>

编辑
14#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我刚遇到这个问题，但需要处理多个标签级别。代码相当丑陋（见评论），但它的工作是： <a href="https://gist.github.com/JensRantil/4721860" rel="nofollow"> https://gist.github.com/JensRantil/4721860 </A> 希望其他人会发现它有用（并随意提出更好的解决方案！）。 </p> </DIV>

编辑
15#
回复此人
荧惑 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我做的，非常简单，如果您的标签链接有一个与之关联的ID，您可以获取href属性并将其传递给显示标签内容的函数： </p> <pre> <code> <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> </code> </pre> <P> 然后在您的网址中，您可以添加哈希值：＃tab_tab1，'tab_'部分将从哈希本身中删除，因此导航选项卡（tabid1）中的实际选项卡链接的ID将放置在此之后，因此您的url看起来像：www.mydomain.com/index.php#tab_tabid1。 </p> <P> 这对我来说很完美，希望它可以帮助别人:-) </p> </DIV>

编辑
16#
回复此人
Just do it | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我为这样的链接制作了与ajax的链接 <code> #!# </code> （例如/test.com#！#test3）但您可以随意修改它 </p> <pre> <code> $(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); }); }); </code> </pre> <P> 简单页面示例 <a href="https://github.com/ritaly/bootstrap-with-tabs" rel="nofollow noreferrer"> 在Github这里 </A> </p> </DIV>

编辑
17#
回复此人
老人与海。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我用于嵌套标签的@flynfish + @Ztyx解决方案： </p> <pre> <code> 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); } }); } </code> </pre> <P> 孩子们应该有class =“嵌套” </p> </DIV>

编辑
18#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我对问题的解决方案，也许有点晚了。但它可能有助于其他人： </p> <pre> <code> // 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; }) </code> </pre> </DIV>

编辑
19#
回复此人
不浪漫罪名 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我处理嵌套选项卡的解决方案。我刚添加了一个函数来检查活动选项卡是否有一个要激活的父选项卡。这是功能： </p> <pre> <code> 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; } }); } </code> </pre> <P> 并且可以这样调用（基于@ flynfish的解决方案）： </p> <pre> <code> 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); }); </code> </pre> <P> 这个解决方案目前对我来说非常好。希望这对其他人有用;） </p> </DIV>

编辑

登录后才能参与评论