I want to give 'class = active' attribute with Meteor + semantic UI - layout

Question

<template name="menu">
<div class="ui grid">
<div class="two wide column"></div>
<div class="twelve wide column">
<div class="ui red menu">
<a class="{{active}} item" id="home">
<i class="home icon"></i> Péng you
</a>
<a class="item" id="message">
<i class="mail icon"></i> Message
</a>
<a class="item" id="friend">
<i class="user icon"></i> Find Friend
</a>
<div class="right red menu">
<a class="active item">
<i class="sign in icon"></i> Log In
</a>
</div>
</div>
</div>
<div class="two wide column"></div>
</div>
Template.menu.helpers({
'active': function (e, tmpt) {
var active = Session.get('activeMake');
return active
}
});
Template.menu.events({
'click #home': function (e, tmpt) {
event.preventDefault();
var activeAttribute = "active";
Session.set('activeMake', activeAttribute);
}
});
now, I can give active. but, I can't delete active when user cluck other menu.
and i think there is much better way to do this. (ex: without session or ID attribute)
please help me....

Answer 1

its an old question, iam having same trouble, this works but is not the perfect way. In my case i got like 5 elements so it work fast, but in other app i got like 300 buttons and works a litle slow in cordova app, specially olds tablets.
Template.yourtTemplateName.events({
'click .commonClass': function (e, t) {
$(".commonClass").each(function () {
console.log(this);
$(this).removeClass('active')
});
$(e.target).addClass('active')
},
});