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

    It?

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

       $('.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>