html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏

在网页设计过程中，某些时候需要隐藏一些元素(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显示与隐藏。