Deixar menu selecionado

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;

}`

Topicos relacionados