jQuery：隱藏一個div。 單擊按鈕后，顯示該div並隱藏另一個
[英]jQuery: Hide a div. After clicking a button show that div and hide another one
問題描述
我的概念是：有div-1和div-2 。 div-2將被隱藏，並且div-1將顯示。 在顯示的div-1有一個button 。 單擊button ， div-1將被隱藏，並且div-2將顯示。
這是我的代碼：
<div id="report-medicine">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>REPORT A SUSPICIOUS MEDICINE</h3>
<form>
<div class="form-group medicine-information">
<textarea type="text" class="" placeholder="Tell Us About The Fake Medicine..."></textarea>
<button class="btn">Next</button>
</div>
<div class="user-information">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<button type="submit" class="btn">Report</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".user-information").hide();
$(".btn").click(function(){
$(".medicine-information").hide()
$(".user-information").show()
});
});
</script>
但是代碼不起作用：//請通過糾正代碼來幫助我。
7 個解決方案
解決方案1
1 2015-03-26 05:30:42
JQuery內置了一個toggle方法。基本上，將要首先隱藏的div設置為“ display：none;”。 然后在單擊按鈕時在可見和隱藏之間切換。
$(document).ready(function() { $("#toggle").click(function() { $("#div1").toggle(); $("#div2").toggle(); }); });
.hidden { display: none; } #div1 { color: red; border: 1px solid black; } #div2 { color: blue; border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="div1"> <p>Hello</p> </div> <div id="div2" class="hidden"> <p>World!</p> </div> <button id="toggle">Toggle</button> </body>
解決方案2
1 2015-03-26 05:31:33
解決方案3
1 2015-03-26 05:44:09
將jquery鏈接放在腳本上方
請替換為：
<button class="btn">Next</button>
<button type="submit" class="btn">Report</button>
用： -
<button type="button" class="btn">Next</button>
<button type="button" class="btn">Report</button>
因此，請嘗試以下代碼：-
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="report-medicine"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h3>REPORT A SUSPICIOUS MEDICINE</h3> <form> <div class="form-group medicine-information"> <textarea type="text" class="" placeholder="Tell Us About The Fake Medicine..."></textarea> <button type="button" class="btn">Next</button> </div> <div class="user-information"> <div class="form-group"> <input type="text" class="form-control" placeholder="Your Name"> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Phone Number"> </div> <button type="button" class="btn">Report</button> </div> </form> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function () { $(".user-information").hide(); $(".btn").click(function () { $(".medicine-information").hide() $(".user-information").show() }); }); </script> </body> </html>
解決方案4
0 2015-03-26 05:14:59
你有錯別字。 快速修復。
更換
$("medicine-inforamtion").hide();
$(".user-information").show();
同
$(".medicine-information").hide();
$(".user-information").show();
解決方案5
0 2015-03-26 05:23:03
請用：-
$(".medicine-inforamtion").hide();
- 類名不同
- 采用 ”。” 在選擇器中選擇一個班級。
解決方案6
0 2015-03-26 05:26:58
您在第一格中使用表單操作。因此頁面會刷新。 並且您具有與textarea.try相同的頁面。嘗試使用Ajax Onclick
解決方案7
0 2015-03-26 05:32:43
您當前的代碼僅在第一次點擊時有效（一個div將被隱藏，另一個將被隱藏）。 但是之后的點擊將繼續將已經隱藏的div設置為hidden，並且所顯示的內容將繼續顯示。 幸運的是，jquery可以顯示是否隱藏，如果顯示則隱藏。 切換
$(document).ready(function(){
$(".user-information").hide();
$(".btn").click(function(){
$(".medicine-information").toggle()
$(".user-information").toggle()
});
});
顯示一個div並隱藏另一個單擊的按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.