Div problems using html, css, Javascript
In an HTML document, I have created a div. In it, I created another div, and in this inner div I put a cross sign. I want to build an event function that closes the parent div when the user clicks on the cross sign.
An example:
<!doctype html>
<html>
<head><title>Div problems</title></head>
<body>
<div id="content">
<div id="box1"> <img src="people.gif"/> </div>
<div id="box2"> <img src="camera.gif" height=30px width=30px/> </div>
<div id="box3"&开发者_如何学JAVAgt; <img src="square.gif" height=30px width=30px/> </div>
<div id="box4"> <img src="rectangle-image3.gif" height=30px width=30px/> </div>
<div id="box5"> <img src="triangle.gif" height=30px width=30px/> </div>
<div id="box6"> <img src="correct.gif" height=30px width=30px/> </div>
<div id="box7"> <img src="exit.gif" height=30px width=30px/> </div>
</div>
</body>
</html>
The cross would be the "exit" image. Please tell me how to do it.
Have you tried anything so far? Given this description, I guess just using a click event on the inner element to change the CSS of the outer element will work fine. Here's a quick example with jQuery:
$(document).ready(function() {
$('#innerElement').click(function() {
$('#outerElement').hide();
});
});
This will effectively set the parent's CSS display to "none." Hiding the parent element will, of course, hide any containing elements, including the one being clicked.
How is this idea. HTML:
<!doctype html>
<html>
<head><title>Div problems</title></head>
<body>
<div id="content" style="position:relative">
<div id="box1"> <img src="people.gif"/> </div>
<div id="box2"> <img src="camera.gif" height=30px width=30px/> </div>
<div id="box3"> <img src="square.gif" height=30px width=30px/> </div>
<div id="box4"> <img src="rectangle-image3.gif" height=30px width=30px/> </div>
<div id="box5"> <img src="triangle.gif" height=30px width=30px/> </div>
<div id="box6"> <img src="correct.gif" height=30px width=30px/> </div>
<div id="box7" style="position:absolute;top:0;right:0" onclick="hideContent()"> <img src="exit.gif" height=30px width=30px/> </div>
</div>
</body>
</html>
JS:
function hideContent() {
document.getElementById('content').style.display="none";
}
Like this should do it, say this is your markup:
<div id="parent"><div><span>CROSS SIGN</span></div></div>
And JQuery:
$('#parent span').click(function() {
$('#parent').hide();
});
This should do it.
This code shows a simplistic approach to the problem, in pure javascript. You should be able to adapt it to your particular problem.
<!doctype html>
<html>
<head>
<title>Div problems</title>
<script type="text/javascript">
window.onload = function() {
var childLink = document.getElementById('sonlink');
childLink.onclick = function() {
var parent = document.getElementById('parent');
parent.style.display = 'none';
return false;
}
}
</script>
</head>
<body>
<div id="parent">Outer div
<div id="son">Inner div <a href="#" id="sonlink">+</a></div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论