Question

我想在点击按钮时显示div，我还需要在div出现时单击的按钮不可见

Answer 1

首先，hide最初div，然后hide show按钮和div按钮点击这样

＆＃13;

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

＆＃13;

#div {
  display: none;
}

＆＃13;

<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>

＆＃13;

Read here about jQuery hide() and show()

Answer 2

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

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

style = "display:none" 然后div将不可见，并且不会有任何空白区域。

填充搜索结果后，使用java脚本（如

）更改显示属性

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

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

Answer 3

您可以使用此代码

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

Answer 4

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

Answer 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>

Answer 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/

点击它后如何使按钮不可见，那时如何使div可见？

6 个答案: