javascript jquery accessing the element being clicked

Question

I've got the following list of semibuttons loaded using javascript:

        var html ='<ul class="nav well-tabs well-tabs-inverse mb10" id="users">';

        html +='<li class="active"><a id="'+this.my.user+'" data-toggle="tab_'+self.my.id+'" class="pestaña">'+this.my.user+'</a></li>';
        var users = this.my.community_users;
        for (i=0;i<users.length;i++) {
            if (users[i].user != this.my.user)
            html +='<li><a id="'+users[i].user+'" data-toggle="tab_'+self.my.id+'" class="pestana">'+users[i].user+'</a></li>';
        };
        html +='</ul>';
        $(html).appendTo("#Dashboard");

Note, that the first item in the list is active. I am getting something like this:

Ok, now i code he onclick event to do something when a button is clicked:

$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function(e){
      // whatever here
});

What I need now is to set active the tab being clicked and set inactive the tab that was active. How can I access both elements to addclass and removeclass active?

var html += is basically wrong. Should be var html =. Or define it before concatenating using var html = ""; — Roko C. Buljan
– Roko C. Buljan, Commented Apr 19, 2015 at 20:06
@Egidi even if corrected now, your question cannot be reproduced in a manner that one could play with. So... please show more. — Roko C. Buljan
– Roko C. Buljan, Commented Apr 19, 2015 at 20:10
FYI, you are using two different classes, pestaña and pestana — A. Wolff
– A. Wolff, Commented Apr 19, 2015 at 20:20

A. Wolff · Accepted Answer · 2015-04-19 20:19:51Z

3

You could use following logic:

$(document).on('click', '#users li:not(.active)', function () {
    $('#users').find('li.active').add(this).toggleClass('active');
});

answered Apr 19, 2015 at 20:19

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kavun · Accepted Answer · 2015-04-19 20:13:44Z

0

Something like this might work. Basically remove the .active class from everything but the element you clicked on. The add the .active class to the element clicked on.

$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
    $('a[data-toggle=tab_'+self.my.id+']').not(this).removeClass('active');
    $(this).addClass('active');
});

answered Apr 19, 2015 at 20:13

kavun

3,3914 gold badges28 silver badges45 bronze badges

Comments

arb · Accepted Answer · 2015-04-19 20:15:32Z

0

I would remove the 'active' class from all the list items first, then add it back to just the only that was clicked.

$(document).on('click', 'a[data-toggle=tab_'+self.my.id+']', function (e) {
    $('#users .active').removeClass('active');
    $(this).addClass('active');
});

answered Apr 19, 2015 at 20:15

arb

7,8847 gold badges35 silver badges67 bronze badges

Collectives™ on Stack Overflow

javascript jquery accessing the element being clicked

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related