當選擇按鈕時，建立一個隱藏圖像的圖庫。 它有效，但在頁面加載時不顯示所有圖像

Question

當您單擊“全部顯示”按鈕時，將顯示圖像，但我需要它們在頁面加載時顯示。 當我從CSS中刪除“ display：none”時，它會中斷並且按鈕不再起作用。 我試過刪除活動按鈕類和“顯示”類。 這段代碼是從W3 School抓取的，我嘗試了盡可能多的復制它，但是還無法在頁面加載時顯示所有內容。

這是供參考的網站： http : //www.barbarabielpainting.com/new/

        <div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('1')"> 1</button>
  <button class="btn" onclick="filterSelection('2')"> 2</button>
  <button class="btn" onclick="filterSelection('3')"> 3</button>
</div>

        <div class="row">

            <div class="col-sm-6 col-md-4 all column 1">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/1.jpg">
                        <img src="img/paintings/1.jpg" alt="Park">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 all column 2">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/2.jpg">
                        <img src="img/paintings/2.jpg" alt="Bridge">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 all column 3">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/3.jpg">
                        <img src="img/paintings/3.jpg" alt="Tunnel">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.btn.active {
  background-color: #666;
   color: white;
}

.active {
    display: block;
}

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Answer 1

函數filterSelection(parameter)添加了show類，並且該類具有display: block屬性。 結果，刪除display: none不起作用，因為所有圖像都已經具有display: block 。

您可以添加此JavaScript以將show類添加到每個div：

window.onload(){
  filterSelection("all");
}

另外，您可以將班級show單獨添加到每個div。