<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
border: 1px solid blue;
}
.blue {
background: white;
border: 2px solid blue;
}
.white {
background: green;
border: 2px solid blue;
}
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<script>
$(function() {
$("div[name='test']").click(function() {
if ($(this).attr("class") == "blue") {
$(this).attr("class", "white");
} else {
$(this).attr("class", "blue");
}
});
alert($("div").css("display"));
$(".btn1").click(function() {
if ($("div").css("display") == "none") {
$("div").css("display", "block");
} else {
$("div").hide();
}
});
});
</script>
<body>
<div id="a" name="test">1</div>
<div id="b" name="test">2</div>
<div id="c" name="test">3</div>
<div id="d" name="test">4</div>
<div id="e" name="test">5</div>
<div id="f" name="test">6</div>
<button class="btn1">Hide Options</button>
</body>
</html>
<html>
<head>
<style>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
border: 1px solid blue;
}
.blue {
background: white;
border: 2px solid blue;
}
.white {
background: green;
border: 2px solid blue;
}
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<script>
$(function() {
$("div[name='test']").click(function() {
if ($(this).attr("class") == "blue") {
$(this).attr("class", "white");
} else {
$(this).attr("class", "blue");
}
});
alert($("div").css("display"));
$(".btn1").click(function() {
if ($("div").css("display") == "none") {
$("div").css("display", "block");
} else {
$("div").hide();
}
});
});
</script>
<body>
<div id="a" name="test">1</div>
<div id="b" name="test">2</div>
<div id="c" name="test">3</div>
<div id="d" name="test">4</div>
<div id="e" name="test">5</div>
<div id="f" name="test">6</div>
<button class="btn1">Hide Options</button>
</body>
</html>