在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素。例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来。对于这类元素显示隐藏的操作,应该如何实现?
html元素的显示与隐藏通常有两种方法,一种方法用CSS样式来控制,另一种方法是把显示后的元素删除,适用于显示一次后不需要再显示,当然再显示也还可以另新创建。
一、js实现元素div隐藏与显示
1、单击按钮隐藏与显示 div
html代码:
js实现元素div隐藏与显示实例
CSS代码:
.display{display:block;}
.hide{display:none;}
.mt{margin-top:10px;}
javascript代码:
function divDisplayAndHide(obj, s) {
var element = document.getElementById(obj);
if (element.className == "display") {
if (s == "隐藏") {
element.className = "hide";
}
else {
element.className = "display";
}
}
else {
if (s == "显示") {
element.className = "display";
}
else {
element.className = "hide";
}
}
}
只要单击“隐藏div”按钮,div就会被隐藏起来;单击“显示div”,隐藏的div又会重新显示。这个功能是通过CSS样式控制的,当单击“隐藏div”时,把元素div的class设置为none;当单击“显示div”时,又把div的class设置为block。
效果:
2、选择 radio 选项显示 div
html代码:
选择 radio 选项显示 div
显示div
隐藏div
效果:
3、10 秒后隐藏 div
html代码:
10 秒后隐藏 div倒计时:
javascript代码:
var i = 10; var timeId;
function countdown() {
timeId = setInterval("HideDivAfterSpecifiedTime()", 1000);
}
function HideDivAfterSpecifiedTime() {
if (i == 0) {
divDisplayAndHide('divId', '隐藏');clearInterval(timeId);
}
document.getElementById("spanId").innerHTML = i;
i--;
}
countdown();
效果:
二、js实现元素ul li显示与隐藏
html代码:
js实现元素ul li显示与隐藏
实现方法跟div隐藏与显示一样,只需调用上面的 javascript 方法 divDisplayAndHide() 就可以实现 ul li显示与隐藏。