堆棧內存溢出
  簡體   English   中英

使用 JavaScript 顯示/隱藏 HTML div

[英]Show/hide HTML divs using JavaScript

 原文  2022-06-11 03:00:57  3   2    javascript/ html/ show-hide

問題描述

我的 HTML 代碼結構如下：

<a class='card'...<a/>
<div id = "divone" class="card__background" ... </div>

分別有四張牌。

單擊帶有 class='card' 的 div 之一時。 JavaScript 代碼應該將 'class="card__background" 隱藏在其他 class='card' div 中。 我已經有一個不起作用的腳本代碼。

為什么會這樣？

我希望修復我的 JavaScript 代碼以使其正常工作

 function imagechange(divid) { var x = document.getElementById(divid); if (x == "divone") { x.style.display = "block"; divtwo.style.display = 'none'; divthree.style.display = 'none'; divfour.style.display = 'none'; } else if (x == "divtwo";) { x.style.display = "block"; divone.style.display = 'none'; divthree.style.display = 'none'; divfour.style.display = 'none'; } else if (x == "divthree";) { x.style.display = "block"; divone.style.display = 'none'; divtwo.style.display = 'none'; divfour.style.display = 'none'; } else { x.style.display = "block"; divone.style.display = 'none'; divtwo.style.display = 'none'; divthree.style.display = 'none'; } }
 :root { --background-dark: #2d3548; --text-light: rgba(255, 255, 255, 0.6); --text-lighter: rgba(255, 255, 255, 0.9); --spacing-s: 8px; --spacing-m: 16px; --spacing-l: 24px; --spacing-xl: 32px; --spacing-xxl: 64px; --width-container: 1200px; } * { border: 0; margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; font-family: 'Montserrat', sans-serif; font-size: 14px; } body { height: 100%; }.hero-section { align-items: flex-start; background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%); display: flex; min-height: 100%; justify-content: center; padding: var(--spacing-xxl) var(--spacing-l); }.card-grid { display: grid; grid-template-columns: repeat(1, 1fr); grid-column-gap: var(--spacing-l); grid-row-gap: var(--spacing-l); max-width: var(--width-container); width: 100%; } @media(min-width: 540px) {.card-grid { grid-template-columns: repeat(2, 1fr); } } @media(min-width: 960px) {.card-grid { grid-template-columns: repeat(4, 1fr); } }.card { list-style: none; position: relative; }.card:before { content: ''; display: block; padding-bottom: 150%; width: 100%; }.card__background { background-size: cover; background-position: center; border-radius: var(--spacing-l); bottom: 0; filter: brightness(0.75) saturate(1.2) contrast(0.85); left: 0; position: absolute; right: 0; top: 0; transform-origin: center; trsnsform: scale(1) translateZ(0); transition: filter 200ms linear, transform 200ms linear; }.card:hover.card__background { transform: scale(1.05) translateZ(0); }.card-grid:hover>.card:not(:hover).card__background { filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px); }.card__content { left: 0; padding: var(--spacing-l); position: absolute; top: 0; }.card__category { color: var(--text-light); font-size: 0.9rem; margin-bottom: var(--spacing-s); text-transform: uppercase; }.card__heading { color: var(--text-lighter); font-size: 1.9rem; text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2); line-height: 1.4; word-spacing: 100vw; }
 <body> <center> <h1>My Favorite Things</h1> <h2>Click on one to get started</h2> </center> <section class="hero-section"> <div class="card-grid"> <a class="card" onclick="imagechange('divone')" href="#"> <div id="divone" class="card__background" style="background-image: url(photo-one.jpg)"></div> <div class="card__content"> <p class="card__category">FAV #1</p> <h3 class="card__heading">Photo</h3> </div> </a> <a class="card" onclick="imagechange('divtwo')" href="#"> <div id="divtwo" class="card__background" style="background-image: url(photo-two.jpg)"></div> <div class="card__content"> <p class="card__category">FAV #2</p> <h3 class="card__heading">Drawing</h3> </div> </a> <a class="card" onclick="imagechange('divthree')" href="#"> <div id="divthree" class="card__background" style="background-image: url(photo-three.jpg)"></div> <div class="card__content"> <p class="card__category">FAV #3</p> <h3 class="card__heading">Sports & Lifting</h3> </div> </a> <a class="card" onclick="imagechange('divfour')" href="#"> <div id="divfour" class="card__background" style="background-image: url(photo-four.jpg)"></div> <div class="card__content"> <p class="card__category">FAV #4</p> <h3 class="card__heading">Anime & Peaky Blinders</h3> </div> </a> <div> </section> </body>

2 個解決方案

解決方案1
 1 已采納  2022-06-11 04:00:25

當你使用 var x = document.getElementById(divid); 你得到一個 object。所以你的情況永遠不會是真的。

如果您想檢查 id，只需將條件更改為：

function imagechange(divid) {
  const x = document.getElementById(divid)
  const id = x.id

  if (id === 'divone') {
    x.style.display = 'block'
    divtwo.style.display = 'none'
    divthree.style.display = 'none'
    divfour.style.display = 'none'
  } 
  else if (id === 'divtwo') {
    x.style.display = 'block'
    divone.style.display = 'none'
    divthree.style.display = 'none'
    divfour.style.display = 'none'
  }  
  else if (id === 'divthree') {
    x.style.display = 'block'
    divone.style.display = 'none'
    divtwo.style.display = 'none'
    divfour.style.display = 'none'
  }  
  else {
    x.style.display = 'block'
    divone.style.display = 'none'
    divtwo.style.display = 'none'
    divthree.style.display = 'none'
  }
}

解決方案2
 1  2022-06-11 04:03:11

1 - 請避免在您的 HTML 中直接使用腳本，這會導致代碼無組織，結構糟糕，並且易於維護。

2 - 我刪除了腳本標簽中的代碼並放置到位

<script src="./site.js"></script>

在同一個文件夾中。 創建一個對應於您的 html 名稱的 js 文件，在本例中我使用了“ site.js ”。

3- 在您的“ site.js ”文件中使用此代碼。

var cards = ["card1", "card2", "card3", "card4"]
var divs = ["div1", "div2", "div3", "div4"]

cards.forEach(function (card, i){
    document.getElementById(card).addEventListener('click', function(){
    document.getElementById(divs[i]).style.display = 'block'
    for (let j in divs){
        if (i != j)  document.getElementById(divs[j]).style.display = 'none'
    }
  })
})

4 - 刪除卡 class 標簽的所有onclick="imagechange()"並為它們添加 id。

5 - 你的 HTML 會是這樣的：

<body>
  <center> 
   <h1>My Favorite Things</h1>
   <h2>Click on one to get started</h2>
  </center>
<section class="hero-section">
 <div class="card-grid">
   <a id = "card1" class="card" href="#">
     <div id = "div1" class="card__background" style="background-image: url(photo-one.jpg)"></div>
     <div class="card__content">
       <p class="card__category">FAV #1</p>
       <h3 class="card__heading">Photo</h3>
     </div>
   </a>
   
   <a id = "card2" class="card" href="#">
     <div id = "div2" class="card__background" style="background-image: url(photo-two.jpg)"></div>
     <div class="card__content">
       <p class="card__category">FAV #2</p>
       <h3 class="card__heading">Drawing</h3>
     </div>
   </a>
   
   <a id = "card3" class="card" href="#">
     <div id = "div3" class="card__background" style="background-image: url(photo-three.jpg)"></div>
     <div class="card__content">
       <p class="card__category">FAV #3</p>
       <h3 class="card__heading">Sports & Lifting</h3>
     </div>
   </a>
   
   <a id = "card4" class="card" href="#">
     <div id = "div4" class="card__background" style="background-image: url(photo-four.jpg)"></div>
     <div class="card__content">
       <p class="card__category">FAV #4</p>
       <h3 class="card__heading">Anime & Peaky Blinders</h3>
     </div>
   </a>
 <div>
</section>
<script src="./site.js"></script>
</body>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用javascript隱藏和顯示div 如何使用JavaScript顯示和隱藏嵌套的DIV 使用下拉菜單和Javascript顯示Hide Divs？ 使用JavaScript顯示/隱藏多個div JavaScript顯示/隱藏div 使用 JavaScript 顯示/隱藏 DIV 使用多個HTML頁面或使用javascript顯示/隱藏div 使用javascript隱藏div Javascript跳過隱藏/顯示div 顯示/隱藏DIV的Javascript循環
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM