情形：
页面上有一个链接（也可以写成按钮），当点击该链接时，显示出一个div框，框内的内容自定义
代码：
页面上的两个控件，div的样式可以自定义进行修改：
<a id="myA" href="#" onclick="showDiv()">显示div</a>
<div id="myDiv" style="display: none; background-color: burlywood; color: black;"></div>showDiv()方法：
function showDiv () {
$('#myDiv').css('display', 'block')
$('#myDiv').html('Hello World')
}div区域显示之后，当点击除该div及a标签外的其他区域时，隐藏该div：
$(document).bind('click', function(e) {
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
if (elem.id && (elem.id == 'myDiv' || elem.id == 'myA')) {
return;
}
$("#myDiv").css("display", "none");
$("#myDiv").html('') // 清空文本内容
});完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type='text/javascript' src='../lib/jquery.min.js'></script>
</head>
<body>
<a id="myA" href="#" onclick="showDiv()">显示div</a>
<div id="myDiv" style="display: none; background-color: burlywood; color: black;"></div>
<script type='text/javascript'>
function showDiv () {
$('#myDiv').css('display', 'block')
$('#myDiv').html('Hello World')
}
$(document).bind('click', function(e) {
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
if (elem.id && (elem.id == 'myDiv' || elem.id == 'myA')) {
return;
}
$("#myDiv").css("display", "none");
$("#myDiv").html('') // 清空文本内容
});
</script>
</body>
</html>
1126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
