DIV的显示和隐藏选项(需要修改)

Show and Hide option for DIV(needs modification)

本文关键字:修改 选项 显示 隐藏 DIV      更新时间:2023-09-26

JavaScript-使用链接和CSS显示或隐藏div

这里我使用java脚本来显示和隐藏DIV

代码

<a onclick="document.getElementById('div_name2').style.display = '';
            return false;" 
       href="" style="text-decoration:none;border-bottom:1px dotted blue;">
        Show more...</a>
    <br />
    <div id="div_name2" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;">
        This is more information placed in our hidden div.  
        When you click on the "hide" link this DIV area will disappear:  
        <a onclick="document.getElementById('div_name2').style.display = 'none';
                return false;" href="" 
           style="text-decoration:none;border-bottom:1px dotted blue;">hide</a>
    </div>

这是我使用的代码

  • 现在我需要的是当页面加载时,我需要DIV可见
  • 加载页面时如何使DIV可见

错误

当我加载这个页面时,div是隐藏的。我如何使div可见???

试试这个代码:

<a onclick="document.getElementById('div_name2').style.display = 'block';
            return false;" 
       href="" style="text-decoration:none;border-bottom:1px dotted blue;">
        Show more...</a>
    <br />
    <div id="div_name2" style="display:block;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;">
        This is more information placed in our hidden div.  
        When you click on the "hide" link this DIV area will disappear:  
        <a onclick="document.getElementById('div_name2').style.display = 'none';
                return false;" href="" 
           style="text-decoration:none;border-bottom:1px dotted blue;">hide</a>
    </div>

您应该将属性"display:block"赋予div,以便在加载网站时显示它。现在,当您点击链接时,您应该将display设置为none以隐藏div_name2