Подсветка активной вкладки с одностраничной навигацией

Question

Я действительно надеюсь, что я не повторяю старый вопрос - я новичок в селекторах, поэтому моя терминология может отсутствовать.

Я работаю над одностраничной страничной страницей, основанной на этом Default :target with CSS. Я хотел бы, чтобы текущая вкладка была выделена или изменена ссылка, чтобы указать текущее местоположение.

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 является селектором для элемента на странице с id или name имени привязки в URL-адресе. Так 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

Надеются, что это позволит решить вам проблему.

Счастливый Coding :)