无法使用页面外部 URL 中的 id 访问选项卡

Question

在这种情况下，我的本地主机中有两个页面，主页和项目。

主页 - 本地主机， 项目页面 - localhost/projects/

项目页面有来自 bootstrap 3 的导航选项卡：

    <ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

当我浏览项目页面内的选项卡时，它工作正常，如果我将鼠标悬停在“橙色”选项卡上，我可以看到链接 - localhost/projects/#orange。

所以问题是我想从主页访问项目页面和橙色选项卡，但使用此链接只会打开 localhost/projects/ 和第一个选项卡，在本例中为红色。

所以我的问题是如何让“导航选项卡”从页面外部访问。

提前致谢。

Answer 1

当您加载您的项目页面时，您需要做两件事：首先，读取 url 并获取用户想要打开的选项卡。其次，显示该选项卡已打开（并关闭其余选项卡）。

您可以使用 document.location.hash 在 javascript 中执行第一部分，读取 URL

第二个，打开你想要的标签，是通过调用 Bootstrap 方法 tab('show') 来完成的。它关闭任何其他。见解释at Bootstrap documentation

@ZimSystem 在这里以非常清晰的方式回答了之前的问题：https://stackoverflow.com/a/31003280/1414176。

我在这里复制他的代码：

var hash = document.location.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;
});

@ZimSystem 的第二部分是在打开标签事件触发后清理 URL。

编辑： 你有一个更好的代码in this other SO answer。它也解决了 scrollTo 问题。

// 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.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});