Deixar menu selecionado

Front-end
#1

Tenho um menu lateral e toda vez que eu clicar em algum item para abrir uma página, gostaria que ficasse selecionado com uma cor.

Menu.xhtml

`
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h=“http://xmlns.jcp.org/jsf/html”>

  • Início 
    <li>
        <h:link outcome="/page/cargo/cons_cargo.xhtml"><i class="fa  fa-fw  fa-ticket"></i>Cargos</h:link>
    </li>

    <li>
        <h:link outcome="/page/setor/cons_setor.xhtml"><i class="fa  fa-fw  fa-bookmark-o"></i>Setores</h:link>
    </li>

    <li>
        <h:link outcome="/page/aud/cons_auditoria.xhtml"><i class="fa  fa-fw  fa-crosshairs"></i>Auditoria</h:link>
    </li>

    <li>
        <h:link outcome="/page/seg/cons_usuario.xhtml"><i class="fa  fa-fw  fa-user"></i>Usuários</h:link>
    </li>

    <li>
        <h:link outcome="/page/seg/form_usuario_alt_senha.xhtml"><i class="fa  fa-fw  fa-lock"></i>Alterar Senha</h:link>
    </li>

</ul>

`

O css do menu

`/* MENU */
.aw-menu {
font-size: 1.1em;
}

.aw-menu > ul {
margin: 0;
padding: 0;
list-style: none;
}

.aw-menu > ul a {
display: block;
padding: 10px 15px;

text-decoration: none;
font-weight: 500;
color: #373737;

}

.aw-menu > ul i {
margin-right: 6px;
}

.aw-menu > ul a:hover, .aw-menu > ul a:focus {
background-color: #dfdfdf;
}

.aw-menu > ul .is-selected {
border-left: 3px solid #0978EA;
background-color: #f3f3f3;
}

.aw-menu > ul .is-selected a {
margin-left: -3px;
color: #0978EA;
}`