Aktives Register mit einfacher Seitennavigation hervorheben

Question

Ich hoffe wirklich, ich wiederhole keine alte Frage - ich bin neu bei Selektoren, daher könnte meine Terminologie fehlen.

Ich arbeite an einer Webseite mit Registerkarten für eine Seite basierend auf dieser Default :target with CSS Lösung. Ich möchte, dass die aktuelle Registerkarte in irgendeiner Weise hervorgehoben oder geändert wird, um den aktuellen Standort anzugeben.

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

Es scheint, wie mein letztes Element (a: Ziel) nichts tun, auch wenn auf Registerkarten klicken bringt mich zu neuen Ankern und ändere den angezeigten Inhalt. Irgendwelche Vorschläge?

Answer 1

:target ist der Selektor für das Element auf der Seite mit dem id oder name des Ankernamens in der URL. So ul#tabnav a:target wird nichts passen, aber wenn Sie den Wähler auf a:target ändern, wird es die 2 Links-Stil Sie in der Mitte der Seite haben, <a id="tab1"></a><a id="tab2"></a>

Um den „aktiven“ Link in Ihrem Navigations Stil werden Sie Sie müssen JavaScript verwenden, um beim Klicken eine Klasse hinzuzufügen, und dann diese Klasse formatieren.

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

Sie die Bootstrap-Tabs verwenden können, es wird Ihnen Problem lösen und funktioniert einwandfrei.

Bitte überprüfen Sie die Demo here

Hope this Sie Problem lösen wird.

Glücklich Coding :)