溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery中點(diǎn)擊按鈕如何實(shí)現(xiàn)顯示與隱藏的方法

發(fā)布時(shí)間：2020-10-20 15:03:10 來源：億速云 閱讀：379 作者：小新 欄目：web開發(fā)

jQuery中點(diǎn)擊按鈕如何實(shí)現(xiàn)顯示與隱藏的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

以下介紹jQuery實(shí)現(xiàn)點(diǎn)擊顯示和隱藏的兩種方法，一個(gè)是toggle()方法，另一個(gè)是jquery中的 hide() 和 show()方法。

注：一定要記得引入jQuery文件，否則無法實(shí)現(xiàn)效果

一、jquery中的toggle()方法

toggle() 方法可以在其中添加兩個(gè)或多個(gè)函數(shù)，然后通過 click 事件進(jìn)行切換，點(diǎn)擊時(shí)先調(diào)用第一個(gè)指定函數(shù)，再次點(diǎn)擊時(shí)調(diào)用第二個(gè)函數(shù)，以此類推，循環(huán)調(diào)用。

語法：$(selector).toggle(function)

function指點(diǎn)擊時(shí)需要運(yùn)行的函數(shù)

實(shí)例描述：當(dāng)首次點(diǎn)擊“顯示與隱藏切換”按鈕時(shí)，隱藏P標(biāo)簽的內(nèi)容，當(dāng)再次點(diǎn)擊時(shí)，顯示P標(biāo)簽的內(nèi)容，完整代碼如下：

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

由下圖所示，第一張圖是沒有點(diǎn)擊時(shí)的效果，第二張圖是第一次點(diǎn)擊時(shí)的效果，將內(nèi)容隱藏起來了。

jQuery中點(diǎn)擊按鈕如何實(shí)現(xiàn)顯示與隱藏的方法

jQuery中點(diǎn)擊按鈕如何實(shí)現(xiàn)顯示與隱藏的方法

二、jquery中的 hide() 和 show()方法

hide() 方法可以將被選元素隱藏起來，類似于 CSS 中的 display:none 屬性。show() 方法可以顯示隱藏的被選元素。 hide() 和 show()用法都一樣，只是一個(gè)顯示一個(gè)隱藏。

語法：$(selector).hide(speed,easing,callback)

speed表示顯示效果的速度，是一個(gè)可選值（slow，fast，毫秒）
easing用于設(shè)置動(dòng)畫的不同點(diǎn)上元素的速度，是一個(gè)可選值（swing，linear）
callback表示show()方法執(zhí)行完之后，需要執(zhí)行的函數(shù)，也是一個(gè)可選值

實(shí)例描述：當(dāng)點(diǎn)擊“隱藏”按鈕時(shí)，隱藏P標(biāo)簽的內(nèi)容，當(dāng)點(diǎn)擊“顯示”按鈕時(shí)，顯示P標(biāo)簽的內(nèi)容，具體代碼如下：

<!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">點(diǎn)擊隱藏按鈕，文字消失<br>點(diǎn)擊顯示按鈕，文字重現(xiàn)</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中點(diǎn)擊按鈕如何實(shí)現(xiàn)顯示與隱藏的方法

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)jQuery中點(diǎn)擊按鈕如何實(shí)現(xiàn)顯示與隱藏的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手