打開/重繪頁面時，設定按鈕開始單擊/激活-有解無憂

我有一個小系統，如果我點擊一個按鈕，它會改變點擊按鈕的顏色，如果我點擊另一個按鈕，它會改變它的顏色，并將之前點擊的按鈕設定回原來的顏色。

我想要的只是在打開/重繪頁面時將其中一個按鈕設定為活動（單擊）。最好將登錄設定為默認單擊。

謝謝你是提前:)

HTML：

<div class="login-or-register-container">
    <button class="button-categories">LOGIN</button>
    <button class="button-categories">REGISTER</button>
</div>

CSS：

.login-or-register-container {
    display: flex;
}

button.button-categories:hover {
    border-bottom-width: 1px;
    border-bottom-color: #1100ff;
}

button.button-categories {
    font-size: 12px;
    display: block;
    width: 100px;
    height: 40px;
    color: #fff;
    background-color: #555;
    border: solid;
    border-radius: 0px;
    border-width: 1px;
    border-color: #999;
    text-align: center;
    font-weight: 1000;
}
  
button.button-categories.active { 
    border-bottom-width: 2px;
    border-bottom-color: #1100ff;
    padding-top: 1px;
    color: #1100ff;
}

Javascript：

// Get all the buttons into a node list
let buttons = document.querySelectorAll(".button-categories");

// Set an event handler on the document so that when
// any element is clicked, the event will bubble up to it
document.addEventListener("click", function(evt){
  // Check to see if it was a button that was clicked
  if(evt.target.classList.contains("button-categories")){

    // Loop over all the buttons & remove the active class
    buttons.forEach(function(button){
      button.classList.remove("active");
    });
    // Make the clicked button have the active class
    evt.target.classList.add("active");
    
  } 
});

uj5u.com熱心網友回復：

如果您想讓一個按鈕在頁面加載時默認處于活動狀態，那么只需active向該按鈕添加類即可。喜歡：

// Get all the buttons into a node list
let buttons = document.querySelectorAll(".button-categories");

// Set an event handler on the document so that when
// any element is clicked, the event will bubble up to it
document.addEventListener("click", function (evt) {
  // Check to see if it was a button that was clicked
  if (evt.target.classList.contains("button-categories")) {
    // Loop over all the buttons & remove the active class
    buttons.forEach(function (button) {
      button.classList.remove("active");
    });
    // Make the clicked button have the active class
    evt.target.classList.add("active");
  }
});

.login-or-register-container {
  display: flex;
}

button.button-categories:hover {
  border-bottom-width: 1px;
  border-bottom-color: #1100ff;
}

button.button-categories {
  font-size: 12px;
  display: block;
  width: 100px;
  height: 40px;
  color: #fff;
  background-color: #555;
  border: solid;
  border-radius: 0px;
  border-width: 1px;
  border-color: #999;
  text-align: center;
  font-weight: 1000;
}

button.button-categories.active {
  border-bottom-width: 2px;
  border-bottom-color: #1100ff;
  padding-top: 1px;
  color: #1100ff;
}

<div class="login-or-register-container">
    <button class="button-categories active">LOGIN</button>
    <button class="button-categories">REGISTER</button>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481807.html

標籤：javascript html css

上一篇：更改材質UI選擇組件邊框的顏色不起作用

下一篇：WireMockEducation:test:找不到com.github.JensPiegsa:wiremock-extension:0.4.0