Question

使用Javascript：

<script>
    function setVisibility(id) {
        if (document.getElementById('bt1').value == 'Hide Layer') {
            document.getElementById('bt1').value = 'Show Layer';
            document.getElementById(id).style.display = 'none';
        } else {
            document.getElementById('bt1').value = 'Hide Layer';
            document.getElementById(id).style.display = 'inline';

        }
    }
</script>

CSS

div {
    display: none;
}

HTML

<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";> 

<div id="sub3">Message Box</div>

这段代码完美无缺。但是当我点击按钮时，它会显示消息框以及“隐藏图层”按钮..我希望我的消息框替换按钮'隐藏图层'显示在它的位置。

Answer 1

如果您只想渲染消息框。请参考以下步骤 -

步骤1-将以下代码添加到HTML文件

<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";> 

<div id="sub3">Message Box</div>

<script>
    function setVisibility(id) {
        if (document.getElementById('bt1').value == 'Show Layer') {
            document.getElementById(id).style.display = 'inline';
            //above statement will show message box.
            document.getElementById('bt1').style.display = 'none';
            //above statement will hide 'Show layer' button.
        } 
    }
</script>

第2步 - 将以下代码添加到css

div {
    display: none;
}

要查看示例，请参阅此链接 - https://jsfiddle.net/yndyn8vj/

Answer 2

你应该这样做。

HTML

<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";> 

<div id="sub3" style="display:none">Message Box</div>

CSS - 没有

的Javascript

<script>
    function setVisibility(id) {
    var el = document.getElementById(id);
    el.style.display = (el.style.display != 'none' ? 'none' : '');
    }
</script>

希望它有所帮助。马可。

用div替换show hide按钮

2 个答案: