1
<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....

Tylor Shin
  • 13
  • 3

1 Answers1

0

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')
    },
});
  • Hi Leonardo. Tried implementing your answer but I had to click the link twice to get it to stay active. Not sure why. However used the package below and it works like a charm - even when there are many buttons – brianjlennon Mar 01 '16 at 14:10