javascript怎么實(shí)現(xiàn)點(diǎn)擊按鈕顯示/隱藏

本文小編為大家詳細(xì)介紹“javascript怎么實(shí)現(xiàn)點(diǎn)擊按鈕顯示/隱藏”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“javascript怎么實(shí)現(xiàn)點(diǎn)擊按鈕顯示/隱藏”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋紗窗等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身定制品質(zhì)網(wǎng)站。

一、基礎(chǔ)語法

在介紹如何實(shí)現(xiàn)按鈕顯示和隱藏之前，我們需要先了解JS部分基礎(chǔ)語法知識(shí)。在網(wǎng)頁HTML文件中，我們可以通過<script>標(biāo)簽將JS代碼嵌入到網(wǎng)頁中，達(dá)到控制網(wǎng)頁元素的目的。以下是HTML文檔中嵌入JS的一般格式：

<html>
  <head>
    <script>
      JS代碼內(nèi)容
    </script>
  </head>
  <body>
    HTML文檔正文
  </body>
</html>

在JS中，我們通常使用document.getElementById()函數(shù)來獲取網(wǎng)頁元素。該函數(shù)會(huì)根據(jù)id屬性的值獲取對(duì)應(yīng)的HTML元素，并返回該元素的對(duì)象。例如：

<button id="btn">點(diǎn)擊我</button>
<script>
  var btn = document.getElementById("btn");
</script>

上述代碼就可以獲取一個(gè)id為“btn”的按鈕元素，然后將其賦值給變量btn。接下來，我們可以使用JS來控制該按鈕的顯示/隱藏。

二、點(diǎn)擊按鈕顯示/隱藏

1、控制按鈕的顯示/隱藏

在JS中，我們可以利用CSS樣式的display屬性來控制元素的顯示或隱藏。當(dāng)display屬性的值為none時(shí)，該元素會(huì)被隱藏；當(dāng)display屬性的值為block時(shí)，該元素會(huì)被顯示。

因此，我們只需要?jiǎng)?chuàng)建一個(gè)按鈕并綁定其點(diǎn)擊事件，在點(diǎn)擊事件中將被控制元素的display屬性設(shè)置為none或block即可實(shí)現(xiàn)該元素的顯示/隱藏。

以下是一個(gè)簡單的實(shí)現(xiàn)方法：

<button onclick="toggle()">點(diǎn)擊我</button>
<div id="content" style="display:none;">需要顯示/隱藏的內(nèi)容</div>
<script>
  function toggle() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
</script>

上述代碼中，我們創(chuàng)建了一個(gè)按鈕，并在其onclick事件中綁定了函數(shù)toggle()，該函數(shù)用于控制需要顯示/隱藏的元素。在該函數(shù)中，我們通過document.getElementById()函數(shù)獲取到id="content"的元素，并將其賦值給變量content。接下來，我們判斷該元素的display屬性值是否為none，如果是，則將其設(shè)置為block；如果不是，則將其設(shè)置為none。

2、控制多個(gè)元素的顯示/隱藏

上述方法只能控制單個(gè)元素的顯示/隱藏，如果需要控制多個(gè)元素，則需要進(jìn)行相應(yīng)修改。我們可以將需要控制的元素封裝在同一個(gè)父級(jí)元素內(nèi)，并在父級(jí)元素的onclick事件中進(jìn)行遍歷，然后通過元素的style.display屬性來控制其子元素的顯示/隱藏。

以下是一個(gè)實(shí)現(xiàn)方法：

<button onclick="toggle()">點(diǎn)擊我</button>
<div id="wrapper">
  <div class="content" style="display:none;">需要顯示/隱藏的內(nèi)容 1</div>
  <div class="content" style="display:none;">需要顯示/隱藏的內(nèi)容 2</div>
  <div class="content" style="display:none;">需要顯示/隱藏的內(nèi)容 3</div>
</div>
<script>
  function toggle() {
    var wrapper = document.getElementById("wrapper");
    var contents = wrapper.getElementsByClassName("content");
    for (var i = 0; i < contents.length; i++) {
      var content = contents[i];
      if (content.style.display === "none") {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  }
</script>

上述代碼中，我們將需要控制的三個(gè)元素封裝在id="wrapper"的父級(jí)元素內(nèi)。在點(diǎn)擊事件觸發(fā)時(shí)，toggle()函數(shù)會(huì)首先獲取到父級(jí)元素對(duì)象wrapper，然后通過wrapper.getElementsByClassName()方法獲取到所有class="content"的元素，并將其存放在數(shù)組contents中。接下來，我們使用for循環(huán)遍歷該數(shù)組中所有元素，并判斷其display屬性的值是否為none，然后將其設(shè)置為block或none。

讀到這里，這篇“javascript怎么實(shí)現(xiàn)點(diǎn)擊按鈕顯示/隱藏”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：javascript怎么實(shí)現(xiàn)點(diǎn)擊按鈕顯示/隱藏
轉(zhuǎn)載來源：http://www.rwnh.cn/article20/ihjpco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、用戶體驗(yàn)、域名注冊、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

javascript怎么實(shí)現(xiàn)點(diǎn)擊按鈕顯示/隱藏