溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jQuery中點擊按鈕如何實現顯示與隱藏的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
以下介紹jQuery實現點擊顯示和隱藏的兩種方法，一個是toggle()方法，另一個是jquery中的 hide() 和 show()方法。
注：一定要記得引入jQuery文件，否則無法實現效果
一、jquery中的toggle()方法
toggle() 方法可以在其中添加兩個或多個函數，然后通過 click 事件進行切換，點擊時先調用第一個指定函數，再次點擊時調用第二個函數，以此類推，循環調用。
語法：$(selector).toggle(function)
function指點擊時需要運行的函數
實例描述：當首次點擊“顯示與隱藏切換”按鈕時，隱藏P標簽的內容，當再次點擊時，顯示P標簽的內容，完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">顯示與隱藏切換</button>
<p>我可以顯示也可以隱藏</p>
<p>啦啦啦</p>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</html>由下圖所示，第一張圖是沒有點擊時的效果，第二張圖是第一次點擊時的效果，將內容隱藏起來了。
二、jquery中的 hide() 和 show()方法
hide() 方法可以將被選元素隱藏起來，類似于 CSS 中的 display:none 屬性。show() 方法可以顯示隱藏的被選元素。 hide() 和 show()用法都一樣，只是一個顯示一個隱藏。
語法：$(selector).hide(speed,easing,callback)
speed表示顯示效果的速度，是一個可選值（slow，fast，毫秒）
easing用于設置動畫的不同點上元素的速度，是一個可選值（swing，linear）
callback表示show()方法執行完之后，需要執行的函數，也是一個可選值
實例描述：當點擊“隱藏”按鈕時，隱藏P標簽的內容，當點擊“顯示”按鈕時，顯示P標簽的內容，具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p id="p1">點擊隱藏按鈕，文字消失<br>點擊顯示按鈕，文字重現</p>
<button id="hide" type="button">隱藏</button>
<button id="show" type="button">顯示</button>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function() {
$("#p1").hide();
});
$("#show").click(function() {
$("#p1").show();
});
});
</script>
</html>效果如圖所示：
感謝各位的閱讀！看完上述內容，你們對jQuery中點擊按鈕如何實現顯示與隱藏的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
