<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Welcome in jQuery</title>
<style type="text/css">
.class1 {
width:100px;
height:100px;
line-height:100px;
border:5px solid blue;
margin:5px;
float:left;
cursor:pointer;
text-align:center;
color:white;
font-weight:bold;
font-size:20px;
}
</style>
<script src="Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.class1").click(function () {
var content = $(this).html();
$("#span1").html("<b>
clicked Box is:</b>" + content);
});
});
</script>
</head>
<body>
<form id="form2" runat="server">
<b>Click below any of the
box</b>
<br />
<div class="class1" style="background-color: red">
First box
</div>
<div class="class1" style="background-color: green">
Second box
</div>
<div class="class1" style="background-color: aqua">
Third box
</div>
<br />
<br />
<span id="span1"></span>
<div>
</div>
</div>
</form>
</body>
</html>
OUTPUT:
If you click Division 1
No comments:
Post a Comment