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