html - 单击属性时的 HTML 按钮已更改

Question

我有 4 个简单的按钮。我怎样才能设置它们，以便在单击其中 1 个时，它具有一些更改并保持更改的属性？当另一个按钮被点击时，它会发生相同的变化，但它会将第一个按钮的属性恢复为“正常”？基本上，它们是导航按钮，我希望它们显示您在页面的哪个部分。先感谢您。

Answer 1

我为单击和更改背景颜色制作了一个示例：

CSS

.beforeClick {
    background-color:#EEE;
}

JavaScript

$(document).ready(function (){
   $('.beforeClick').click(function (){
       $('.beforeClick').css('background-color',"#EEE");
           $(this).css('background-color',"#555");
   });
});

HTML

<button class="beforeClick">btn1</button>
<button class="beforeClick">btn2</button>
<button class="beforeClick">btn3</button>
<button class="beforeClick">btn4</button>
<button class="beforeClick">btn5</button>

（你需要 jQuery）

这是一个演示

Answer 2

利用类来切换按钮的状态。就像是：

<div class="button">PRESS</div>
....
<div class="button">PRESS</div>

只需要另一类.selected，你就可以用几行普通的 JavaScript 覆盖你的场景：

var buttons = document.getElementsByClassName('button');

for (var i = 0; i < buttons.length; i++) { //loop through all buttons
    buttons[i].addEventListener('click', function() {
        if (document.getElementsByClassName('selected').length) { //check if we already have a selected element
            document.getElementsByClassName('selected')[0].className = document.getElementsByClassName('selected')[0].className.replace(/(?:^|\s)selected(?!\S)/g, ''); //remove selected class from "old" element
        }
        this.className += ' selected'; //add selected class to element that has been clicked / called the handler
    });
}​

看到一个工作小提琴

Answer 3

我要做的是编写一个javascript函数，例如：

     <script type='text/javascript'>
     function toggle(btn)
     {
          var btnArray = document.getElementsByClassName('button');
          for(i = 0; i < btnArray.length; i++)
          {
              if(btn == btnArray[i])
              {
                  //the button is the button which is clicked
                  if(!btn.classList.contains("clicked"))
                  {
                      btn.className += " clicked";
                  }
              }
              else
              {
                  //remove class clicked, just reset the classname
                  btnArray[i].className = "button";
              }
          }


     }

     </script>

     <button class="button" onclick="toggle(this);">btn1</button>
     <button class="button" onclick="toggle(this);">btn2</button>
     <button class="button" onclick="toggle(this);">btn3</button>

您可以在 CSS 中添加“点击”类的描述。

    .clicked{
        background-color: red;
    }

（我在 Chromium 中测试了这段代码，它可以工作）。