w3cタブスタイルを使用して特定のタブにリンクする方法

Question

私はウェブサイトを構築しており、タブ付きのインターフェースとサイドバーメニューを組み合わせ、各タブに対応するサイドバーサブメニューを作成したいと考えています。私はW3schoolsのJavaScriptタブを使用するように変更しましたが、タブの1つに直接リンクする方法を理解できません。私が見つけたすべてのガイドは、<button class="tablinks" id="tab1" onclick="openCity(event, 'tab1')">Tab 1</button>を推奨しているのに対し、タブ付きのインターフェイスを作成するのに<li>を使うようです。ここに私のコードは次のとおりです。

<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です：

私は、各タブは https://www.example.com/tabpage#tab1型リンクと連係可能なことが持っている必要がありますどのようなコード

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

？

Answer 1

:target疑似クラスが適切な選択肢かもしれません。

：target CSS疑似クラスは、URLのフラグメントに一致するidを持つ一意の要素（ターゲット要素）を表します。

次のようにそれを使用することができます。

.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を、そのまま完全に互換性はありませんが、私はあなたに、この時点から考えて、それを作ることができるはずですあなた自身で作業してください。