点击切换div 的隐藏与显示

末蓝、 2022-01-29 12:55 428阅读 0赞

### 点击切换div 的隐藏与显示 ###

适合做切换按钮

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
    
    </head>
    
    <body>
    
        <button type="button" id="showHidden">点击切换div的隐藏与显示</button>
    
        <div id="div1" style="display:block">请叫我第一层</div>
    
        <div id="div2" style="display:none">请叫我第二层</div>
    
        <script type='text/javascript'> function show_hidden(obj) { if (obj.style.display == 'block') { obj.style.display = 'none'; } else { obj.style.display = 'block'; } } var sh = document.getElementById("showHidden"); sh.onclick = function () { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); show_hidden(div1); show_hidden(div2); return false; } </script>
    
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: /images/20220129/6f93c5379dff40c6b8128627e9f2decf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，428人围观）

还没有评论，来说两句吧...

相关阅读

相关点击按钮时div显示再次点击时隐藏（白天夜间切换）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

左手的ㄟ右手/ 2022年10月02日 00:46/ 0 赞/ 247 阅读

相关 js控制div点击隐藏显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta n

比眉伴天荒/ 2022年09月26日 15:49/ 0 赞/ 298 阅读

相关点击显示再次点击隐藏

<script> $(function()\{ $('\a').click(function()\{//点击a标签 if($('

亦凉/ 2022年06月07日 09:06/ 0 赞/ 374 阅读

相关点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏

<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />

一时失言乱红尘/ 2022年05月23日 13:53/ 0 赞/ 297 阅读

相关点击一个按钮隐藏和显示div

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击一个按钮隐藏

一时失言乱红尘/ 2022年05月09日 06:56/ 0 赞/ 328 阅读

相关点击其他区域，隐藏div

<div id='test'></div> 点击其他区域关闭这个div <script type="text/javascript"> $(document).bi

亦凉/ 2022年05月04日 03:58/ 0 赞/ 318 阅读

相关 js/jq 点击按钮显示div,点击页面其他任何地方隐藏div

1. JS效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Content

深碍√TFBOYSˉ_/ 2022年04月18日 06:32/ 0 赞/ 342 阅读

相关点击切换div 的隐藏与显示

点击切换div 的隐藏与显示适合做切换按钮 <!DOCTYPE html> <html> <head> <me

末蓝、/ 2022年01月29日 12:55/ 0 赞/ 429 阅读

相关点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏

<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />

蔚落/ 2022年01月29日 09:35/ 0 赞/ 411 阅读

相关 div 显示与隐藏

最近写项目用到DIV隐藏,以下引用[http://www.cnblogs.com/dotLive/archive/2007/04/04/699302.html][http_ww

我不是女神ヾ/ 2021年12月17日 15:45/ 0 赞/ 441 阅读