$('#on, #off').click(function(){ var other = $(this).siblings().attr('id'); if ($(this).attr('class') == 'unclicked') { $(this).removeClass('unclicked').addClass('clicked'); $('#' + other).removeClass('clicked').addClass('unclicked'); } else { $(this).removeClass('clicked').addClass('unclicked'); $('#' + other).removeClass('unclicked').addClass('clicked'); } var data = $(this).attr('id'); $.ajax({ url: 'process.php', type: 'GET', data: {'value': data}, success: function(resp) { console.log(resp); } }); });
a{text-decoration:none;} body{text-align:center;background-color:#E0E1DF;font-size:20px;color:#5a5a5a;font-weight:normal;font-family:arial;width:99%;} p{display:block;width:400px;margin:0 auto;text-align:left;} /* from main */ #holder{ position: relative; display:table; width:160px; height:26px; line-height: 26px; border-radius: 5px; margin:50px auto; cursor:pointer; overflow: hidden; } #on, #off{ display:table-cell; font-size: 20px; font-weight: bold; } .unclicked{ color: #000; background:white; } .clicked{ color: #fff; background: #8BC53F; }
<div id="holder"> <span id="on" class="unclicked">On</span><span id="off" class="clicked">Off</span> </div>