javascript层隐藏和显示的代码

最新推荐文章于 2023-07-19 21:05:46 发布

绝凌峰

最新推荐文章于 2023-07-19 21:05:46 发布

阅读量797

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/juelingfeng/article/details/38416549

本文介绍了一种使用JavaScript实现网页中层的显示与隐藏的方法。通过修改特定元素的innerText属性来切换显示状态，并利用DOM操作调整div元素的display属性完成层的显示与隐藏。文章包含完整的HTML与JavaScript代码示例。

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

javascript 层隐蔽和显示的代码
　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition al.dtd">
　　<html xmlns="http://www.w3.org/1999/xhtml">
　　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
　　<title>层隐蔽和显示 2009-7-7</title>
　　<script language="javascript" type="text/javascript">
　　function doit(){
　　var m = document.getElementByIdx_x("menu");
　　m.innerText = m.innerText == "更多"?"收起":"更多";
　　document.getElementByIdx_x("content1").style.display = m.innerText == "更多"?"block":"none";
　　document.getElementByIdx_x("content2").style.display = m.innerText == "更多"?"none":"block";
　　}
　　</script>
　　<style type="text/css">
　　#content1,#content2{
　　width:300px;
　　height:200px;
　　border:1px solid black;
　　background:#cccccc;
　　}
　　#menu{
　　cursor:pointer;
　　}
　　</style>
　　</head>
　　<body>
　　<span id="menu" onclick="doit()">更多</span>
　　<div id="content1">
　　我是更多里面的内容
　　</div>
　　<div id="content2" style="display:none;">
　　我不是更多里面的内容
　　</div>
　　</body>
　　</html>