我正在为我的网站创建一个菜单，但我不知道如何检查所选项目。目前，它一直在反弹到第一个。
nav {
margin: 27px auto 0;
position: relative;
width: 590px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
nav a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
nav .start-home, a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #e74c3c;
}
p {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #ecf0f1;
font-family: 'Cherry Swash',cursive;
font-size: 16px;
}
span {
color: #2BD6B4;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main_menu.css">
</head>
<body>
<nav>
<a href="#">test</a>
<a href="#1">foo1</a>
<div class="animation start-home"></div>
</nav>
</body>
</html>有人能帮我保持选中的菜单项吗。我不想使用javascript。有办法做到这一点吗？我读到一些关于"活跃"元素的东西。
编辑：由于@hackerfrosch认为使用js会更容易，所以我尝试了一下。但我不知道如何在我的情况下通过js为按钮分配一个类。我可以指定按钮的颜色吗，因为每个按钮都有不同的颜色？
我进一步搜索了一下，完全重新制作了菜单。设计大致相同，完全不使用Javascript。
.slide-toggle{
display: none;
}
.slide-menu{
font-family: arial, sans-serif;
max-width: 600px;
margin: 50px auto;
overflow: hidden;
}
.slide-menu label{
width: 25%;
text-align: center;
display: block;
float: left;
}
.slide-menu label:hover{
cursor: pointer;
}
.slide-menu label span{
display: block;
padding: 20px 15px 15px;
color: white;
}
.slider{
width: 100%;
height: 100%;
display: block;
background: #415a75;
border-radius: 10px;
margin-top: 10px;
}
.slider .bar{
width: 25%;
height: 40px;
border-radius: 10px;
}
.slide-menu label, .slider .bar {
transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
}
.slide-menu .slide-toggle + label{
opacity: 1;
}
.slide-menu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; background: #1abc9c }
.slide-menu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; background: #e74c3c }
.slide-menu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; background: #3498db }
.slide-menu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; background: #9b59b6 }
.slide-menu #slide-item-1:hover ~ .slider .bar{ margin-left: 0; background: #1abc9c }
.slide-menu #slide-item-2:hover ~ .slider .bar{ margin-left: 25%; background: #e74c3c }
.slide-menu #slide-item-3:hover ~ .slider .bar{ margin-left: 50%; background: #3498db }
.slide-menu #slide-item-4:hover ~ .slider .bar{ margin-left: 75%; background: #9b59b6 }<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main_menu.css">
<title></title>
</head>
<body>
<nav class="slide-menu">
<input onclick="location.href='#1'" type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
<label for="slide-item-1"><span>Home</span></label>
<input onclick="location.href='#2'" type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
<label for="slide-item-2"><span>About</span></label>
<input onclick="location.href='#3'" type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
<label for="slide-item-3"><span>Folio</span></label>
<input onclick="location.href='#4'" type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
<label for="slide-item-4"><span>Contact</span></label>
<div class="animation start-home"></div>
<div class="slider">
<div class="bar"></div>
</div>
</nav>
</body>
</html>