Live Demo
DownloadSource 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>
<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>
No comments:
Post a Comment