Remember menu actives element

I'm creating a menu for my site and I don't know how to keep the selected item checked. At the moment it keeps bouncing back to the first one.

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>

Can someone help me to keep the clicked menu item selected. I don't want to have to use javascript. Is there a way to do this? I read something about an 'active' element.

Edit: Since @hackerfrosch thinks that the whole thing is easier with js, I tried that. But I don't know how I can assign a class to the buttons via js in my case. Can I specify the color that the button should have, since each button has a different color?

Solution

I searched a little further and completely remade the menu. The design is roughly the same and it works entirely without 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>