頁面加載時默認顯示 div 內容 Javascript

Question

我想在網站加載時顯示一個 div 內容（.option-1）。

document.getElementById('target').addEventListener('change', function () {
  let divs = document.querySelectorAll('.initial, .vis'); // grab all divs that have the class "initial" or "vis"
  
  for (let i = 0; i < divs.length; i++) {
    // loop over all divs
    let div = divs[i];
    if (div.classList.contains(this.value)) {
      // the div's class list contains the value of the select box, e.g. "option-1" or "option-2"
      div.classList.remove('initial');
      div.classList.add('vis'); // make the div visible
    } else {
      div.classList.add('initial');
      div.classList.remove('vis'); // otherwise make the divs invisible
    }
  }
  
});

 <div class="header"> <select name="dropdown" id="target"> <option value="option-1">option1</option> <option value="option-2">option2</option> </select> </div> <div class="temps"> <div class="initial option-1">Temp 1</div> <div class="initial option-2">Temp 2</div> </div> <div class="forms"> <div class="initial option-1">Form 1</div> <div class="initial option-2">Form 2</div> </div>

.初始顯示無；

 .initial { display: none; }

Answer 1

如果您希望下拉列表中的第一個選項在加載時運行邏輯，請添加一個帶有 DispatchEvent 的加載事件偵聽器，該偵聽器將模擬下拉列表中的更改。

window.addEventListener('load', function() {
  let event = new Event('change');
  document.getElementById('target').dispatchEvent(event);
});