我希望导航栏选项卡在单击时以黄色突出显示并保持这种状态,直到我单击另一个选项卡。我需要使用 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;
}