我有一個不改變html類的JS函式的問題

我是 JS 和 html 的新手，所以請放輕松。我制作了一個包含多個步驟的注冊表單。我有兩個不同形式的按鈕。下一個表單按鈕和后退按鈕。下一個按鈕可以完美運行，它會根據我的需要更改 html id。但是與前一個完全相同的后退按鈕不起作用。為什么？

我希望 JS 函式更改 html 類。

function backPageFunction() {
  document.querySelector(".containerform1").id = 'containerform1';
  document.querySelector(".containerform2").id = 'containerform2'
  document.getElementById('progress-step1').style.width = '250px';
  document.querySelector('.step-col2').style.fontSize = '15px';
  document.querySelector('.step-col1').style.fontSize = '18px';
  document.querySelector('.step-col1').style.color = '#f0eaea';
  document.querySelector('.step-col2').style.color = '#546E7A';
};

function nextPageFunction() {
  // containerform1.id='secActive1';
  document.querySelector(".containerform1").id = 'secActive1';
  document.querySelector(".containerform2").id = 'secActive2';
  // containerform2.id='secActive2';
  document.getElementById('progress-step1').style.width = '470px';
  document.querySelector('.step-col1').style.fontSize = '15px';
  document.querySelector('.step-col2').style.fontSize = '18px';
  document.querySelector('.step-col2').style.color = '#f0eaea';
  document.querySelector('.step-col1').style.color = '#546E7A';

};

#secActive1 {
  width: 982px;
  height: 600px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  position: absolute;
  opacity: 0 !important;
  pointer-events: none;
  transform: translateX(100%);
  transition: 1s;
}

#secActive2 {
  width: 982px;
  height: 270px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  position: absolute;
  opacity: 1 !important;
  transform: translateX(0%);
  transition: 1s;
}

#containerform1 {
  width: 982px;
  height: 600px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  position: absolute;
  opacity: 1;
  transition: 1s;
}

#containerform2 {
  width: 982px;
  height: 270px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: 1s;
}

<div class="next-btn-box">
  <button class="nextbtnform1" id="nextbtnform1" onclick="nextPageFunction()">??? ??????? ? ?????  </button>
</div>
</fieldset>
</form>
</div>
<div id="containerform2" class="containerform2">
  <form id="Form2" class="Form2">
    <fieldset id="Form2">
      <legend class="form-title">?????? ??????? ? ????</legend>
      <div class="form_row three_column clearfix">
        <div>
          <label>??? ???????</label>
          <span class="star">*</span>
          <select id="edu" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty" name="edu" valid-directive="isEmpty">
            <option label="????? ? ???????" value="number:100" selected="selected">????? ? ???????</option>
            <option label="??? ?????" value="number:101">??? ?????</option>
            <option label="????????" value="number:102">????????</option>
            <option label="???????? ????" value="number:103">???????? ????</option>
            <option label="????? ? ??????" value="number:104">????? ? ??????</option>
          </select>
        </div>
        <div>
          <label>???? ??????</label>
          <span class="star">*</span>
          <input id="degree">
        </div>
        <div>
          <label>??????? ??? ?????</label>
          <span class="star">*</span>
          <input id="college" name="college" valid-directive="isEmpty,isPersianAlphaWithoutNumber,isInAlphabet([2#50])">
        </div>
      </div>
    </fieldset>
    <fieldset class="clearfix moshakhasat_canoon ng-scope">
      <div class="next-btn-box">
        <button class="backbtnform2" id="backbtnform2" onclick='backPageFunction()'>?????? ? ?????? ???????</button>

uj5u.com熱心網友回復：

嗨所以我你想改變元素的類試試這個：

1)id將 '更改為classesin css：

喜歡.secActive1,。secActive2等等

2） JS：

function changeClasses(){ 
    document.querySelector(".containerform1").classList.add('secActive1'); 
    document.querySelector(".containerform1").classList.add('secActive2'); 
}

單擊其他按鈕時不要忘記洗掉它們：

function changeClassesBack(){
   document.querySelector(".containerform1").classList.remove('secActive1');
   document.querySelector(".containerform1").classList.remove('secActive2');
}

希望能幫助到你

標籤：javascripthtmlcss功能

上一篇：如何將一個函式作為引數傳遞給另一個函式，但初始函式的引數發生了變化？

下一篇：G-Sheet功能支持匹配日期、名稱和其他點