So verknüpfen Sie den Tab mit der Registerkarte "W3C"

Question

Ich erstelle eine Website und möchte eine Tabbed-Benutzeroberfläche mit einem Sidebar-Menü kombinieren, wobei die Seitenleisten-Untermenüs den einzelnen Tabs entsprechen. Ich habe die JavaScript-Tabs von W3schools für meine Zwecke geändert, aber ich kann nicht herausfinden, wie man einen direkten Link zu einem der Tabs herstellt. Jede Anleitung, die ich gefunden habe, scheint <li> zu verwenden, um die Tabbed-Schnittstelle zu erstellen, während W3C <button class="tablinks" id="tab1" onclick="openCity(event, 'tab1')">Tab 1</button> empfiehlt. Hier ist mein Code:

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

Und hier ist meine 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" 
    } 
} 

Welche Code muss ich jede Registerkarte, um mit einem https://www.example.com/tabpage#tab1 Typ Link miteinander verknüpfbar sein?

Answer 1

Die :target Pseudoklasse könnte die richtige Wahl für Sie sein.

Die CSS-Pseudoklasse: target repräsentiert ein eindeutiges Element (das Zielelement) mit einer ID, die dem URL-Fragment entspricht.

Sie können es wie folgt:

.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>

Die Javascript, wie es steht nicht vollständig kompatibel ist, aber ich denke, von diesem Zeitpunkt an Sie in der Lage sein sollte, es zu machen, selbständig arbeiten.