HTMLDIV應該被隱藏但位置不會改變現有的div

我想隱藏 1、3 和 2 & 4 而不改變它們的位置。

div{
  width: 10%;
  float: left;
}

<div style="background-color: blue"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>

uj5u.com熱心網友回復：

隱藏的可見性將保留元素的空間但不顯示它：

div {
  width: 10%;
  float: left;
}

div:nth-child(1),
div:nth-child(3) {
  visibility: hidden;
}

<div style="background-color: blue">
  <p>1</p>
</div>
<div style="background-color: yellow">
  <p>2</p>
</div>
<div style="background-color: red">
  <p>3</p>
</div>
<div style="background-color: green">
  <p>4</p>
</div>

uj5u.com熱心網友回復：

您可以將它們的不透明度設定為 0，這樣它們就不會可見并且不會影響其他 div 的位置

.box{
  display: flex;
}

.blue{
  opacity: 0;
}
.red{
  opacity: 0;
}

<div class="box">  
  <div class="blue" style="background-color: blue"><p>1</p></div>
  <div style="background-color: yellow"><p>2</p></div>
  <div class="red" style="background-color: red"><p>3</p></div>
  <div style="background-color: green"><p>4</p></div>
</div>  

uj5u.com熱心網友回復：

正如@Lalalena 在評論中提到的，您可以使用visibility:hidden

div{
  width: 10%;
  float: left;
}
.hidden{
  visibility: hidden;
}
.blue{
  background-color: blue;
}
.yellow{
  background-color: yellow; 
}
.red{
  background-color: red;    
}
.green{
  background-color: green;  
}

<div class="blue hidden"><p>1</p></div>
<div class="yellow"><p>2</p></div>
<div class="red hidden"><p>3</p></div>
<div class="green"><p>4</p></div>

uj5u.com熱心網友回復：

隱藏可見性僅用于在此處隱藏元素，但元素位置將保留為空白，因此您可以看到空格而不是元素。建議使用 class 或 id 來獲得準確的結果

    div {
      width: 10%;
      float: left;
    }
.blue{
visibility:hidden;
}
.red{
visibility:hidden;
}

<div class="blue" style="background-color: blue">
  <p>1</p>
</div>
<div class="yellow" style="background-color: yellow">
  <p>2</p>
</div>
<div class="red" style="background-color: red">
  <p>3</p>
</div>
<div class="green" style="background-color: green">
  <p>4</p>
</div>

uj5u.com熱心網友回復：

div{
  width: 10%;
  float: left;
}

<div style="background-color: blue; visibility:hidden;"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red; visibility:hidden;"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>

;

uj5u.com熱心網友回復：

可見性 CSS 屬性在不改變檔案布局的情況下顯示或隱藏元素。

根據您想要切換顏色的方式，這里有一個快速示例，它使用按鈕來切換元素組的可見性。行內 CSS 已被移動以使 HTML 更清晰，并且 JS 更易于使用。答案底部的 MDN 檔案鏈接。

// Cache the containers, and add a listener to the
// buttons container
const colors = document.querySelector('.colors');
const buttons = document.querySelector('.buttons');
buttons.addEventListener('click', handleClick);

// When a child in the buttons container is
// clicked (see event delegation below)...
function handleClick(e) {
  
  // ...first check it's a button
  if (e.target.matches('button')) {
    
    // ... destructure its id from the dataset
    const { id } = e.target.dataset;
    
    // ... and use the id to toggle those elements
    // in the colors container which have a `color` class
    // and a class that matches the id
    // (using a template string to create the selector)
    colors
      .querySelectorAll(`.color.${id}`)
      .forEach(color => color.classList.toggle('hidden'));
  
  }

}

.colors { display: flex; width: 60%; justify-content: left; align-items: center; }
.color { width: 20%; text-align: center; border: 2px solid white; }
.red { background-color: red; }
.blue { background-color: lightblue; }
.yellow { background-color: yellow; }
.green { background-color: lightgreen; }
.orange { background-color: orange; }
.pink { background-color: pink; }
.hidden { visibility: hidden; }
.buttons { margin-top: 1em; }

<div class="colors">
  <div class="color group3 pink"><p>1</p></div>
  <div class="color group1 blue"><p>2</p></div>
  <div class="color group2 yellow"><p>3</p></div>
  <div class="color group1 red"><p>4</p></div>
  <div class="color group2 green"><p>5</p></div>
  <div class="color group3 orange"><p>6</p></div>
</div>

<div class="buttons">
  <button data-id="group1">Toggle group 1</button>
  <button data-id="group2">Toggle group 2</button>
  <button data-id="group3">Toggle group 3</button>
</div>

附加檔案

• classList/toggle

• addEventListener

• 解構賦值

• 事件委托

• matches

• querySelector/querySelectorAll

• 模板/字串文字

標籤：javascript html jQuery css 引导程序 5

上一篇：Javascript：從鍵中過濾結果

下一篇：如何在JavaScript中專門格式化日期？