O problema aqui é um engano conceitual.
A pseudoclasse (é assim mesmo que se chama) :active é utilizada para identificar um dos quatro estados de um link, ou seja, se ele corresponde ao momento em que você clica no link. As outras pseudoclasses são: :link, :visited e :hover.
O que o seu código faz é inserir uma classe na tag li, que é basicamente um identificador, tal como uma id, só que pode aparecer em vários elementos do mesmo HTML.
A principal diferença entre as duas coisas, é que as pseudoclasses dos links são como propriedades de estado dos links, ou seja, todo link terá isso sem você precisar fazer nada, e elas poderão ser acessadas pelo CSS para efeito de estilização.
Das quatro, apenas :hover e :active poderão mudar durante a exibição de uma página, daí agruparmos os estilos de links em dois grupos:
a:link, a:visited
a:hover, a:active
A outra grande diferença entre as classes e pseudoclasses é a forma de utilização no CSS. As classes (de fato) são simbolizadas com um ponto (.), enquanto as pseudoclasses recebem dois pontos (:). Por exemplo:
a.exemplo:link, a.exemplo:visited { /* estilos */ }
a.exemplo:hover, a.exemplo:active { /* estilos */ }
Aqui a tag a ("anchor", ou link) é identificada pela classe .exemplo, e pelos seus respectivos estados (:link e :visited, :hover e :active)
Para experimentar, eu sugiro o seguinte exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#009;}
a:visited {color:#090;}
a:hover {color:#900;}
a:active {color:#9f0;}
</style>
</head>
<body>
<p>Passe o mouse e clique aqui: <a href="">link de testes</a></p>
</body>
</html>
Finalmente, sobre seu código, ele deverá funcionar, mas apenas para definir dinamicamente uma classe para a tag li, mas ela somente será utilizada pelo estilo CSS, sem qualquer outra implicação.
:hover
é um efeito quando o mouse passa em cima de um link,:active
é o destaque dado a um elemento quando clicado. Ambas são propriedades de um elemento