0

I need a help. I have this structure

<div class="buttons">
<p onclick="function1('param1')">button1</p>
<p onclick="function2('param2')">button2</p>
<p onclick="function3('param3')">button3</p>
</div>

This code works perfecty, but in addition I need add class="active" to current selected button which I can not do. The following code does not work.

$(document).ready(function() {
$('.buttons').click(function(){
if($(this).hasClass('active')){
return false;
}
else{
$('.buttons > p').removeClass('active');
$(this).addClass('active');
}
});
})

Can anyone say how to solve this problem?

2 Answers 2

0

You have a typo in

<div class="buutons"> 

it should be

<div class="buttons">

Also

<p onclick="function3('param3')>button3</p>

should be

<p onclick="function3('param3')">button3</p>

JSFiddle is here.

0
0

remove the onclick attribute on the p elements, it will overwrite the listener you registered in your js code, register it in the js code instead.

change you code, add "> p" in your first selector:

$(document).ready(function() {
$('.buttons > p').click(function(){
if($(this).hasClass('active')){
return false;
}
else{
$('.buttons > p').removeClass('active');
$(this).addClass('active');
}
});
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.