Javascript 单击其他按钮后如何更改按钮颜色

我想让我的按钮在点击另一个按钮后改变颜色。目前，我有一个想法。。。但这将创建更多的html页面，这不是我想要的。下面的代码有3个按钮，其中按钮1设置为深灰色，按钮2和按钮3设置为浅灰色。单击按钮2或按钮3应变为深灰色，按钮1应为浅灰色。我曾尝试在互联网上进行研究，但没有找到任何解决办法

注意：我已经使用div创建了我的按钮

以下是我的代码片段：

。选择：悬停{
背景色：#2A2A；
}
。选择：已访问{
背景颜色：粉红色；
}
B.卡杜兰{
显示：表格单元格；
高度：37像素；
宽度：210px；
浮动：左；
背景色：#2A2A；
文本对齐：左对齐；
边缘顶部：10px；
线高：36px；
}
B.卡马特先生{
显示：表格单元格；
高度：37像素；
宽度：225px；
浮动：左；
背景色：#7575；
文本对齐：左对齐；
左边距：3倍；
边缘顶部：10px；
线高：36px；
}
B.卡德斯波托夫{
显示：表格单元格；
高度：37像素；
宽度：230px；
浮动：左；
背景色：#7575；
文本对齐：左对齐；
左边距：3倍；
边缘顶部：10px；
线高：17px；
}
.mat字体{
颜色：白色；
字号：9pt；
文本对齐：居中；
}

1.
2.
3

只需对背景颜色进行更改。我用的是橙色，用你想要的

  <a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
                document.getElementById('hideaway3').style.display='block';document.getElementById('hideaway1').style.backgroundColor='#f60';toggleTable3();return false">

---

您必须使用唯一的ID，您在前面的空间中使用相同的ID，这使得它非常混乱和有问题，这里是我认为您正在寻找的示例：

使用jquery：

$(function () {
$('.test').click(function(){
            if ($(this).hasClass('darkGrey') ){
            $(this.children).removeClass('darkGrey')
        } 
        else
        {
            $(this.children).addClass('darkGrey');
            $(this).siblings().children().removeClass('darkGrey');
        }
    })
});

---

所以我给了你的可选项一个类，而不是一个id，这比使用id要少一点具体。然后它是一个简单的onclick事件来添加和删除一个我称之为darkGrey的突出显示类。我没有包括切换底部的div，因为看起来您有一个函数来处理它。

我的建议-使用jQuery，因为您似乎不介意根据您接受的答案：

您需要更改toggleTable以使用idx进行切换。您可能还希望使链接的容器div可单击，而不是使链接可单击。您需要在CSS中添加一个cursor:ponter

$(function() {
  $(".select").on("click",function(e){
    e.preventDefault(); // only needed if .select are links
    var idx = $.trim($(this).text());
    $(".hideaway").hide();
    $("#hideaway"+idx).show();
    toggleTable(idx);
  });
});

HTML:

1.
2.
3.






1.
2.
3.

内联JavaScript是一种糟糕的做法，阅读起来也很糟糕。@JamesDonnelly是的，我知道这一点，抱歉：（.如果我有足够的时间，我可能会对其进行修改。花3分钟，现在就做。@SW4:我继承了足够多的类似于这样的垃圾代码，我想极力阻止它。

window.onload=function（）{var hideaways=document.queryselectoral（“.hideawayLink”）；…}

和ID必须是唯一的！！！请发布ToggleTable谢谢！现在我需要弄清楚如何将其放在我的页面上。@mplungjan我的JSFIDLE中没有内联内容，也没有无效的包装。实际上它有无效的html。它也不起作用-单击时它不会显示div1 div2或div3，并且正在运行onload而不是headfiddle@mplungjan内有div的锚点？将不会验证。

<div class="materialtable">
  <div class="materialrow">
      <div class="bcardunlaminated select">
        <div class="mat-font">
          1
        </div>
      </div>
      <div class="bcardmatt select">
        <div class="mat-font">
          2
        </div>
      </div>
      <div class="bcardspotuv select">
        <div class="mat-font">
           3
        </div>
      </div>
    </a>
  </div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" class="hideaway">1</div>
<div id="hideaway2" class="hideaway">2</div>
<div id="hideaway3" class="hideaway">3</div>