jquery 如何隐藏一个按钮后点击它,在那个时候如何使一个div可见?

eqoofvh9  于 2023-11-17  发布在  jQuery
关注(0)|答案(6)|浏览(104)

我想让一个div在按钮点击时可见,我还需要在div出现时隐藏点击的按钮。

ffscu2ro

ffscu2ro1#

你可以使用这个代码,

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

字符串

ax6ht2ek

ax6ht2ek2#

首先,您可以先hidediv,然后hide show按钮和div on按钮单击,如下所示

$(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()

qlfbtfca

qlfbtfca3#

你可以从这个得到答案:Make one div visible and another invisible
您可以使用style的display属性。首先将结果部分的样式设置为
style = "display:none"那么div将不可见,并且不会有任何白色空间。
一旦搜索结果被填充,
document.getElementById("someObj").style.display = "block"使用java脚本可以使div不可见
document.getElementById("someObj").style.display = "none

lzfw57am

lzfw57am4#

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

字符串

ohtdti5x

ohtdti5x5#

修改自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>

字符串

xhv8bpkk

xhv8bpkk6#

使用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/

字符串

相关问题