単一ページのナビゲーションでアクティブなタブをハイライトする

Question

私は古い質問を繰り返さないことを本当に望んでいます - 私はセレクタが新しく、用語が不足している可能性があります。

私はこのDefault :target with CSSソリューションに基づいてタブ付きの単一ページのWebページを作成しています。私は現在のタブをリンクを強調表示したり、現在の場所を示す何らかの方法で変更したりしたいと思います。

HTML：

<ul id="tabnav"> 
    <li><a href="#tab1" class="tab1">Tab 1</a></li> 
    <li><a href="#tab2" class="tab2">Tab 2</a></li> 
</ul> 
<a id="tab1"></a> 
<a id="tab2"></a> 

<div class="tab tab1 default-tab">This is text you should see as you load the page</div> 
<div class="tab tab2">This is text that will appear after you click on tab 2</div> 

はCSS：（：ターゲット）何もしないタブをクリックすると、持参していても、

.tab { 
    display:none 
} 
.default-tab { 
    display:block 
} 

:target ~ .default-tab {display:none} 

#tab1:target ~ .tab1, 
#tab2:target ~ .tab2 { 
    display: block 
} 

ul#tabnav a:hover { 
    background: red; 
} 

ul#tabnav a:target{ 
    border-width: thick; 
    border-color: black; 
} 

私の最後の要素は以下のように思えます私を新しいアンカーに変えて、表示されたコンテンツを変更します。助言がありますか？

Answer 1

:targetは、URLのアンカー名のidまたはnameを持つページの要素のセレクタです。だから、ul#tabnav a:targetは何も一致しませんが、あなたはa:targetにセレクターを変更した場合、それはあなたがページの中央に持っている2つのリンク、

<a id="tab1"></a><a id="tab2"></a>はあなたがよあなたのナビゲーションで「アクティブ」のリンクをスタイルにのスタイルをしますクリックでクラスを追加するにはjavascriptを使用し、そのクラスをスタイルする必要があります。

var $links = $('#tabnav a'); 
 
$links.on('click',function(e) { 
 
    e.preventDefault(); 
 
    $links.removeClass('active'); 
 
    $(this).addClass('active'); 
 
})

.tab {display:none} 
 
.default-tab {display:block} 
 

 
:target ~ .default-tab {display:none} 
 

 
#tab1:target ~ .tab1, 
 
#tab2:target ~ .tab2 { 
 
    display: block 
 
} 
 

 
.active { 
 
    color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<ul id="tabnav"> 
 
     <li><a href="#tab1" class="tab1">Tab 1</a></li> 
 
     <li><a href="#tab2" class="tab2">Tab 2</a></li> 
 
    </ul> 
 
    <a id="tab1"></a> 
 
    <a id="tab2"></a> 
 

 
    <div class="tab tab1 default-tab"> 
 
     This is text you should see as you load the page 
 
    </div> 
 
    <div class="tab tab2"> 
 
     This is text that will appear after you click on tab 2 
 
    </div>

Answer 2

あなたは、ブートストラップタブを使用することができ、それはあなたの問題を解決し、正常に動作します。

これはあなたの問題を解決するデモがhere

希望を確認してください。

ハッピーコーディング:)