点击按钮后如何使按钮不可见，当时如何使div可见？答案

【问题标题】：How to make a button invisible after clicking on it,at that time how to make a div visible?点击按钮后如何使按钮不可见，当时如何使div可见？
【发布时间】：2018-05-28 03:23:18
【问题描述】：

我想让一个 div 在按钮单击时可见，并且我还需要在 div 出现时单击的按钮不可见

【问题讨论】：

你必须考虑你所尝试的。这样，问题就可以结束了。

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

您可以使用此代码，

$('#your_button_id').on('click',function(){
  $('#your_div_id').show();
  $(this).hide();
});

【讨论】：

感谢您的帮助
我需要隐藏整个 div，包括按钮，并使新 div 在旧 div 的相同位置可见
然后代替 $(this).hide();你必须给 $('#your_div_id_that _to_hide').hide();
谢谢，它正在工作
@vishnureji 如果它对您有用，请您接受答案。谢谢。

【解决方案2】：

首先你可以hidediv，然后hide show按钮和按钮上的div像这样点击

$(document).ready(function() {
  $("#hide").click(function() {
    $(this).hide();
    $("#div").show();
  });

});

#div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>If you click on the "Hide" button, button will disappear And A div will appear.</p>

<div id="div"> I am a div </div>
<button id="hide">Hide</button>

Read here about jQuery hide() and show()

【讨论】：

感谢您的帮助
很高兴我能帮上忙。请接受答案以供将来参考他人:)
我需要隐藏整个 div，包括按钮，并使新 div 在旧 div 的相同位置可见

【解决方案3】：

你可以从这里得到你的答案： Make one div visible and another invisible

可以使用 style 的 display 属性。最初将结果部分样式设置为

style = "display:none" 那么 div 将不可见，也不会有任何空白。

在填充搜索结果后，使用 java 脚本更改显示属性，如

document.getElementById("someObj").style.display = "block" 使用 java 脚本可以使 div 不可见

document.getElementById("someObj").style.display = "none

【讨论】：

【解决方案4】：

function showDiv() {
    document.getElementById('myId').style.display='block';
    document.getElementById('myButton').style.display='none';
}

【讨论】：

感谢您的帮助
我需要隐藏整个 div，包括按钮，并使新 div 在旧 div 的相同位置可见

【解决方案5】：

修改自css wc3schools tryit editor site

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("#desc").toggleClass("blue");
    $("#mybutton").toggleClass("blue");
    });
});
</script>
<style>
.blue {
    display: none;
}
</style>
</head>
<body>

<div id="desc" class="blue">
<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<button id="mybutton">Toggle class</button>

</body>
</html>

【讨论】：

【解决方案6】：

使用 jQuery 我们可以实现这个:::

**HTML:**
<div class="divClass">  
    My Div Content shows here  
</div>

<button> Click me </button>

**CSS:**
.divClass {
    display: none
}

**JS:**
$('body').on('click', 'button', function() {
    $(this).hide();
    $('.divClass').show();
});

**Output:** 
https: //jsfiddle.net/cvsraghava/8hg786x9/

【讨论】：

感谢您的帮助，我已经从上面得到了答案