Question

我对javascript和HTML很生疏，并试图回到它。

以下是我要修改的元素的示例代码：

      <div class="table">
         <h1>Container</h1>
         <ul class="tabs">
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>                 
         </ul>
         <div id="tab_container">
            <div id="tab1" class="tab_content"></div>
            <div id="tab2" class="tab_content"></div>
            <div id="tab3" class="tab_content"></div>
         </div>
      </div>

这是我正在使用的一个简单的标签结构。我已经可以控制显示哪个标签了。

我希望能够根据当前页面网址控制到达此页面时显示哪个选项卡。例如，如果网址类似于

... / index.html的＃2

我想要显示第二个标签。是可以使用javascript吗？

Answer 1

您可以使用:target伪选择器

通过简单的CSS实现此目的

.tab_content {
    display: none;
}
.tab_content:target {
    display: block;
}

或者，如果你想使用JavaScript：

.tab_content {
    display: none;
}

document.querySelector(document.location.hash).style.display = 'block';

或者，或许：

Array.prototype.forEach.call(document.querySelectorAll('.tab_content'), function (tab) {
    tab.style.display = tab.id === document.location.hash.substring(1) : 'block' : 'none';
});

参考文献：

CSS：
- :target。 JavaScript的：
- Array.prototype.forEach()。
- UrlUtils.hash
- Function.prototype.call()。

Answer 2

我假设你有以下功能：

function showTab(tabNumber) { ... }

为了获得哈希标记之后的值，您只需使用以下代码：

var current = window.location.hash.substr(1);

然后你可以简单地将current传递给你的函数：

showTab(current);

在页面加载时显示元素 - 使用当前URL

2 个答案: