[英]hide and show a divs on button clicks using jquery
This is the code I have used.这是我使用的代码。 The idea is to have a "back button."
这个想法是有一个“后退按钮”。 I have tried using show() and hide() as well.
我也尝试过使用 show() 和 hide() 。
The requirement is to show the previous screen when clicked on the back button, but for some reason nothing is being shown.要求是在单击后退按钮时显示上一个屏幕,但由于某种原因没有显示任何内容。
Whenever I click on the "go back" button it is supposed to show the previous screen but it is not working.每当我单击“返回”按钮时,它应该显示上一个屏幕,但它不起作用。 I used the
show()
and hide()
function at first that didn't work so I used the display:block
and display:none
properties but in both cases the result is the same.我最初使用
show()
和hide()
function 不起作用,所以我使用了display:block
和display:none
属性,但在这两种情况下结果都是一样的。
I can't seem to notice what am I missing.我似乎没有注意到我错过了什么。
ps: I'm new to jquery. ps:我是 jquery 的新手。
function showmeme() { $("#b_game").css("display", "none"); $("#b_meme").css("display", "none"); $("#memes").css("width", "100%"); $("#game").css("width", "0%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); document.getElementById('memes').innerHTML = `<p class="display">You opened meme section<p> <br class="display"> <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`; } function showgame() { $("#b_game").css("display", "none"); $("#b_meme").css("display", "none"); $("#memes").css("width", "0%"); $("#game").css("width", "100%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); document.getElementById('game').innerHTML = `<p class="display">You opened meme section<p> <br class="display"> <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`; } function back() { $("#memes").css("width", "49%"); $("#game").css("width", "49%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); $("#b_game").css("display", "block"); $("#b_meme").css("display", "block"); $(".display").css("display", "none"); }
.body { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.memes { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid black; width: 49%; height: 560px; overflow: hidden; }.game { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid black; width: 49%; height: 560px; overflow: hidden; }.butn { width: 200px; height: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <div class="memes" id="memes"> <button id="b_meme" class="butn" onclick="showmeme()"> make a meme </button> </div> <div class="game" id="game"> <button id="b_game" class="butn" onclick="showgame()"> play meme games </button> </div> </div>
While I think it would be easier and better to use pure css for the animation part and hide/show part.虽然我认为将纯 css 用于 animation 部分和隐藏/显示部分会更容易和更好。 But you can do it by using
.insertAdjacentHtml()
但是您可以使用
.insertAdjacentHtml()
document.getElementById('b_meme').insertAdjacentHTML('afterend', `<p class="display">You opened meme section<p>
<br class="display">
<button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`);
Demo演示
function showmeme() { $("#b_game").css("display", "none"); $("#b_meme").css("display", "none"); $("#memes").css("width", "100%"); $("#game").css("width", "0%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); document.getElementById('b_meme').insertAdjacentHTML('afterend', `<p class="display">You opened meme section<p> <br class="display"> <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`); } function showgame() { $("#b_game").css("display", "none"); $("#b_meme").css("display", "none"); $("#memes").css("width", "0%"); $("#game").css("width", "100%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); document.getElementById('b_game').insertAdjacentHTML('afterend', `<p class="display">You opened meme section<p> <br class="display"> <button class="display" style="width:200px; height:50px" onclick=back()>go back</button>`); } function back() { $("#memes").css("width", "49%"); $("#game").css("width", "49%"); $("#memes").css("transition", "width 0.5s"); $("#game").css("transition", "width 0.5s"); $("#b_game").css("display", "block"); $("#b_meme").css("display", "block"); $(".display").css("display", "none"); }
.body { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.memes { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid black; width: 49%; height: 560px; overflow: hidden; }.game { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid black; width: 49%; height: 560px; overflow: hidden; }.butn { width: 200px; height: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body"> <div class="memes" id="memes"> <button id="b_meme" class="butn" onclick="showmeme()"> make a meme </button> </div> <div class="game" id="game"> <button id="b_game" class="butn" onclick="showgame()"> play meme games </button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.