2
<p class="yes one">1</p>
<p class="yes two">2</p>
<p class="yes three">3</p>

$(document).ready( function(){

	$('.yes').each(function(){
		if($('.yes').hasClass('active')) $('.yes').removeClass('active');
		$('.yes').click(function(){
			$(this).toggleClass('active');
		})
	})
})
p
{
    text-align: center;
    color: black;
    font-family: arial;
    display: inline-block;
}
.active{
	background-color: #000;
	color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="yes one">1</p>
<p class="yes two">2</p>
<p class="yes three">3</p>

2 ответа 2

4

Это?

$(document).on('click', '.yes', function(){
  $('.yes').not(this).removeClass('active');
  $(this).toggleClass('active');
});
p
{
    text-align: center;
    color: black;
    font-family: arial;
    display: inline-block;
}
.active{
	background-color: #000;
	color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="yes one">1</p>
<p class="yes two">2</p>
<p class="yes three">3</p>

1

$('.yes').on('click', function() {
    $('.yes').removeClass('active').filter(this).toggleClass('active');
});
p{
    font-family:'arial';
    display:inline-block;
    cursor:pointer;
    padding:3px;
}
.active{
	background-color:#000;
	color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="yes one">1</p>
<p class="yes two">2</p>
<p class="yes three">3</p>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.