javascript - 如何使用 w3c 选项卡样式链接到特定选项卡

Question

我正在构建一个网站，并希望将标签式界面与侧边栏菜单相结合，侧边栏子菜单对应于每个标签。我修改了 W3schools 的 JavaScript 选项卡供我使用，但我不知道如何直接链接到其中一个选项卡。我找到的每个指南似乎都使用 <li>创建选项卡式界面，而 W3C 推荐 <button class="tablinks" id="tab1" onclick="openCity(event, 'tab1')">Tab 1</button> .这是我的代码:

<div class="tabbedbox">
    <div class="tab">
        <button class="tablinks" id="tab1" onclick="openCity(event, 'first')">First</button>
        <button class="tablinks" id="tab2" onclick="openCity(event, 'Second')">Second</button>
        <button class="tablinks" id="tab3" onclick="openCity(event, 'Third')">Third</button>
        <button class="tablinks" id="tab4" onclick="openCity(event, 'Fourth')">Fourth</button>
        <button class="tablinks" id="tab5" onclick="openCity(event, 'Fifth')">Fifth</button>
    </div>

    <div id="First" class="tabcontent">
        Tab Text
    </div>

    <div id="Second" class="tabcontent">
        Tab Text
    </div>

    <div id="Third" class="tabcontent">
        Tab Text
    </div>

    <div id="Fourth" class="tabcontent">
        Tab Text
    </div>

    <div id="Fifth" class="tabcontent">
        Tab Text
    </div>
</div>

这是我的 JS:

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    openCity.defaultOptions = {
        "param": "tab"
    }
}

我需要什么代码才能让每个选项卡都可以链接到 https://www.example.com/tabpage#tab1输入链接？

Answer 1

:target伪类可能是您的正确选择。

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

您可以像下面这样使用它:

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

<div class="tabbedbox">
    <div class="tab">
        <button class="tablinks" id="tab1">First</button>
        <button class="tablinks" id="tab2">Second</button>
        <button class="tablinks" id="tab3">Third</button>
    </div>
    <div id="First" class="tabcontent">
       First Tab Text
    </div>
    <div id="Second" class="tabcontent">
       Second Tab Text
    </div>
    <div id="Third" class="tabcontent">
      Third Tab Text
    </div>
</div>
<br>
<a href="#First">goto first tab content via #First hash</a>

目前的 javascript 并不完全兼容，但我认为从现在开始你应该能够让它自己工作。