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

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

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

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

当前回答

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

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

注意，我使用了一个导航类前缀来导航链接。

2019-05-07 20:07:15

其他回答

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

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

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

$（function（）{ var hash = window.location.hash; hash && $（'ul.nav a[href=“' + hash + '”]'）.tab（'show'）; $（'.nav-tabs a'）.click（function （e） { $（this）.tab（'show'）; var scrollm = $（'body'）.scrollTop（）; window.location.hash = this.hash; $（'html，body'）.scrollTop（scrollm）; }); });

2019-04-04 07:41:36

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

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

2013-01-19 14:13:54

这段代码根据#散列选择正确的选项卡，并在单击选项卡时添加正确的#散列。(使用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);
    });
});

2012-11-15 12:34:16

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

推荐文章

最新文章

标签