单击属性时的 HTML 按钮已更改答案

【问题标题】：HTML Button On Click Property Changed单击属性时的 HTML 按钮已更改
【发布时间】：2012-12-11 12:17:25
【问题描述】：

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

【问题讨论】：

@MahdiParsa 是的，我可以使用 jquery，但不知道如何在其中执行此操作。我没有尝试太多，因为我不知道该怎么做。
我希望我们讨论的文本元素的样式看起来像按钮，而不是实际的表单元素按钮。
@cimmanon 不，不幸的是，这些是真正的按钮，但不是表单按钮，而是普通的

标签： html css button properties click

【解决方案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）

这是DEMO

【讨论】：

你听起来好像这不可能用香草 JS 完成。
什么是“关闭”所有其他按钮的最佳方法，以便唯一具有不同背景的按钮是您单击的那个？如果您单击另一个，第一个会恢复正常？
是的，我改变背景只有你可以使用jquery的所有api是可能的。

【解决方案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
    });
}

见a working fiddle

【讨论】：

【解决方案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 中测试了这段代码，它可以工作）。

【讨论】：