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

我对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>

容器

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

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

…/index.html#2

我想显示第二个选项卡。

---

是否可以使用javascript执行此操作？

我假设您拥有如下函数：

function showTab(tabNumber) { ... }

要获取哈希标记后的值，只需使用以下代码：

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

然后，您只需将

current

传递给您的函数：

showTab(current);

---

使用

：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:
  • 。 JavaScript: