Active color with CSS3 & HTML

Question

I'm suffering to active color on my template, I have used this template http://codepen.io/suez/pen/XJGOyL

How can I active menu, like when I clicked another menu not active. how to do this?

This is my code:

//HTML
<div class="demo__content">
<h2 class="demo__heading">What do you need help with?</h2>
<div class="demo__elems">

    <div class="demo__elem demo__elem-1">With advertising online</div>
    <div class="demo__elem demo__elem-2">With a website</div>
    <div class="demo__elem demo__elem-3">I need help with both</div>

    <span class="demo__hover demo__hover-1"></span>
    <span class="demo__hover demo__hover-2"></span>
    <span class="demo__hover demo__hover-3"></span>

    <div class="demo__highlighter">
        <div class="demo__elems">
            <div class="demo__elem">With advertising online</div>
            <div class="demo__elem">With a website</div>
            <div class="demo__elem">I need help with both</div>
        </div>
    </div>

</div>

//CSS
 .demo__hover-2 {
      top: 7rem;
    }
    .demo__hover-2:hover ~ .demo__highlighter {
      -webkit-transform: translateY(7rem);
      transform: translateY(7rem);
    }
    .demo__hover-2:hover ~ .demo__highlighter .demo__elems {
      -webkit-transform: translateY(-7rem);
      transform: translateY(-7rem);
    }
    .demo__hover-3 {
      top: 14rem;
    }
    .demo__hover-3:hover ~ .demo__highlighter {
      -webkit-transform: translateY(14rem);
      transform: translateY(14rem);
    }
    .demo__hover-3:hover ~ .demo__highlighter .demo__elems {
      -webkit-transform: translateY(-14rem);
      transform: translateY(-14rem);
    }
    .demo__elem a:active, a:hover, a:focus {
      text-decoration: none;
      outline: none;
    }

Answer 1

If you are able to use jQuery in you code you can do it by adding "active" class to selected element of your menu.

For instance

$(".demo__elem").click(function() {
  $(".demo__elem").removeClass("active"); // remove active from all
  $(this).addClass("active"); // add active to this
});

and you "active" css should be styled as well.

Answer 2

If you're wanting to click a link, go to that page, and have that link retain the active state once you're on that page, you'll need to do one of three things.

1. Using HTML and CSS only, every page can be built completely and individually. This is called a static website. The menu will live on each page, and the link for the page you're on will need a unique ID (usually class="active" ) in order to set it apart as the active link. Using CSS, you can style to appear how you want.

2. You can use javascript to dynamically detect the page you're on, usually by reading your URL, and apply the active state to the appropriate link.

3. You can use a server side codding language such as PHP , ASP, RUBY, etc., and set your menus to dynamically detect which page you're on based on internal/server side code and apply the active state to the menu. This is a very clean, and once you get the hang of the language you choose, it's a very easy and effective method. This is the most popular choice by developers and is called a dynamic website.

In each case, you'll still use CSS the exact same way to style the active link.