html和css如何实现点击出现隐藏列表

html和css如何实现点击出现隐藏列表,第1张

需要使用到js,获取到点击按钮

声明一个变量为 var flag = false

当点击时 if(!flag){ flag = true , 把要显示的元素设置display为none}else{ flag= false, display设置为block}

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<script language="JavaScript">

function show(){

    document.getElementById("table").style.display='block'

}

function hide(){

    document.getElementById("table").style.display='none'

}

</script>

<style>

td{border:1px solid #369}

</style>

<table id="table" cellspacing="0" cellpadding="5" style="">

    <tr><td>1</td><td>2</td><td>3</td></tr>

    <tr><td>1</td><td>2</td><td>3</td></tr>

    <tr><td>1</td><td>2</td><td>3</td></tr>

</table>

<br>

<input type="button" value="关闭table" onclick="hide()">

<input type="button" value="显示table" onclick="show()">

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6270344.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存