Question

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

主页 - localhost，项目页面 - 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 /和第一个标签，在本例中为Red。

所以我的问题是如何从页面外部访问“nav-tab”。

提前致谢。

Answer 1

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

您可以使用document.location.hash

在javascript中执行第一部分，读取URL

第二个，打开你想要的标签，通过调用Bootstrap方法选项卡（'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); });

无法使用页面之外的网址中的ID访问标签

1 个答案: