//根据id获取对象
function
$(id)
{
return
document.getElementById(id)
}
function
showMenu(baseID,divID)
{
baseID=$(baseID)
divID=$(divID)
if(showMenu.timer)clearTimeout(showMenu.timer)//清楚定时器
hideCur()//隐藏上个菜单
divID.style.display='block'//显示当前菜单
showMenu.cur=divID//保存当前菜单对象
if(!divID.isCreate)
{//该菜单没创建标志则设置为已创建
divID.isCreate=true
//divID.timer
=
0
divID.onmouseover=function
()
{//鼠标放在菜单上时显示
if(showMenu.timer)clearTimeout(showMenu.timer)
hideCur()
divID.style.display='block'
}
function
hide()
{//鼠标离开菜单1秒后隐藏菜单
showMenu.timer=setTimeout(function
()
{
divID.style.display='none'
},1000)
}
divID.onmouseout=hide
baseID.onmouseout=hide
}
function
hideCur()
{//隐藏上个菜单
showMenu.cur&&(showMenu.cur.style.display='none')
}
}
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。
2、在index.html中的<script>标签,输入js代码:$('button').click(function () {$('#123').css('display', 'block')})。
3、浏览器运行index.html页面,此时点击btn按钮后,div的内容成功被显示了出来。
使用JavaScript控制div的显示隐藏,通常是修改div元素的display为none。
display属性 定义和用法
display 属性规定元素应该生成的框的类型。
display属性 可能的值
JavaScript控制div的隐藏
比如我们有一个id为div1的div元素
<div id="div1"></div>隐藏,代码如下
document.getElementById("div1").style.display="none"显示,代码如下
document.getElementById("div1").style.display="block"其他方式
除了修改display,还可以通过修改元素的宽度和高度为零实现隐藏效果。