1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Button</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="holder"> <span id="on" class="unclicked">On</span><span id="off" class="clicked">Off</span> </div> <script> $('#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); } }); }); </script> </body> </html> |
Css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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; } |