Edit in JSFiddle

<a href="#!login">Login</a>
<a href="#!">Logout</a>

<ul id='modules' style="display:none">
    <li id='login'><a href="#!login">Login</a></li>
    <li id='filemanager'><a href="#!filemanager">Filemanager</a></li>
    <li id='contacts'><a href="#!contacts">Contacts</a></li>
</ul>

var Navigate = can.Control({
    "{can.route} module add" : function(){
       this.element.show();
    },
    "{can.route} module set" : function(route, ev, newVal,oldVal){
       $("#"+oldVal).removeClass("active");
       $("#"+newVal).addClass("active");
    },
    "{can.route} module remove" : function(){
       this.element.hide();
        this.element.children().removeClass("active");
    }
});

can.route(":module");

new Navigate("#modules");

.active {
    background-color: yellow;
}
ul {
   list-style: circle;   
   margin: 5px 20px;
}