如何使导航栏选项卡在选中时突出显示? (没有 JS)

问题描述 投票:0回答:0

我希望导航栏选项卡在单击时以黄色突出显示并保持这种状态,直到我单击另一个选项卡。我需要使用 CSS :target 选择器,但不能使用 JS。

我尝试了很多组合,但标签的颜色总是白色 :(

<div class="Nav">
<h5><a href="#Section-1">Section 1</a></h5>
<h5><a href="#Section-2">Section 2</a></h5>
<h5><a href="#Section-3">Section 3</a></h5>
<h5><a href="#Section-4">Section 4</a></h5>
<h5><a href="#Section-5">Section 5</a></h5>
</div>

<div id="Section-1"> 11111111111 </div>
<div id="Section-2"> 222222222222 </div>
<div id="Section-3"> 33333333333 </div>
<div id="Section-4"> 4444444444444 </div>
<div id="Section-5"> 5555555555555555 </div>


.Nav { 
Display:inline-block; 
position:fixed; 
z-index:100; 
background:black; 
width:100%; top:0; 
left:0; 
text-align:center; 
} 

.Nav h5 { 
display:inline-block; 
position:relative; 
margin:1rem; 
color:white; 
} 

.Nav a { 
display: 
block; width: 100%; 
text-align: center; 
font-size: 1rem; 
color: inherit; 
outline: 0 none; 
} 

#Section-1,#Section-2,#Section-3,#Section-4,#Section-5 { 
display:block; 
position:relative; 
padding:70px; 
width:100px; 
border:2px solid red; 
} 

.Nav h5:target a { 
color: yellow; 
}
html css tabs navbar target
© www.soinside.com 2019 - 2024. All rights reserved.