javascript的div隐藏

最新推荐文章于 2023-05-04 10:58:16 发布

testasda

最新推荐文章于 2023-05-04 10:58:16 发布

阅读量604

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/testasda/article/details/20495455

本文介绍了一个使用JSP和JavaScript实现的简单示例，该示例通过点击文本框来显示或隐藏一个Div元素，并在点击Div以外的区域时隐藏Div。此功能通过JavaScript事件监听和样式操作实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'div.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

function show_div(evt) {
var od = $('div1');
var e = window.event || evt;
var o = e.srcElement || e.target;
with (od.style) {
display = 'block';
left = o.offsetLeft + 'px';
top = o.offsetTop + o.offsetHeight + 1 + 'px';
}
}

function hide_div(evt) {
$('div1').style.display = 'none';
}

function control_bubble(oEvent) {
//取消冒泡
oEvent = oEvent || window.event;
if (document.all) {
oEvent.cancelBubble = true;
} else {
oEvent.stopPropagation();
}
};

function fill_input(oEvent) {
$('text1').value = $('div1').innerHTML;
control_bubble(oEvent);
}

window.onload = function() {
$("text1").onfocus = show_div;

document.onclick = function() {//点击空白文档隐藏
hide_div();
};

$("text1").onclick = control_bubble;
$("div1").onclick = fill_input;
}
</script>

</head>

<body>
<input type="text" id="text1" value="点击显示">
<div id="div1" align="center">点击本身不会隐藏，但点击空白处会隐藏</div>
</body>
</html>