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

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

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

当从外部页面点击链接时，应该分别转到Home选项卡和Notes选项卡

当前回答

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

// 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-22 11:18:35

其他回答

对于引导3:

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

https://jsfiddle.net/DTcHh/6638/

2015-04-15 03:49:19

这在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-05 04:23:46

用于引导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);
})

2022-11-28 10:09:11

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

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

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

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

2014-01-17 12:09:27

尝试了上面讨论的几种方法，最终得到了以下工作解决方案，只需在编辑器中复制并粘贴即可。要测试，只需更改哈希到收件箱，发件箱，撰写在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>

希望这能节省你的时间。

2016-01-29 05:57:58

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

推荐文章

最新文章

标签