ON - OFF Button IN Jquery




Source Code :


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ON - OFF IN Jquery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".on").click(function (){
$(".on").css({background: '#09F'});
$(".off").css({background: '#FFF'});
});

$(".off").click(function (){

$(".off").css({background: '#900',display: 'block'});
$(".on").css({background: '#FFF'});
});

});
</script>
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif;}
.nav{width:100px;border:1px solid #CCC;float:left;cursor:pointer;}
.half{width:50px;padding:5px 0;text-align:center;color:#E8E8E8;float:left;}
.on{background:#09F;}
.off{background:#FFF;}
</style>
</head>

<body>
<h2 align="center">ON - OFF IN Jquery</h2>
<div style="width:100px;margin:0 auto">

<div class="nav">
<div class="half on" >ON</div>
<div class="half off">OFF</div>
</div>

</div>

</body>
</html>