如何使用javascript创建切换活动按钮

我想创建一个由八个按钮组成的切换按钮。若点击了七个切换按钮，它将切换两个类（并更改CSS样式）。 如果单击切换按钮中的一个（每日按钮），它将切换其他七个按钮的样式

这是我的代码：

我预定义的toggleclass（this）函数将class1切换为class2 CSS样式

我试过这么做

<div id="menu1">

$(document).ready(function() {

$('#hey').click(function()
{
         if($('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').hasClass('class1')){
     $('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').toggleClass('class2')
  }else{
    $('#btnDiv,#btnDiv1,#btnDiv2,#btnDiv3,#btnDiv4,#btnDiv5,#btnDiv6').toggleClass('class2')
  }

});

});



                        <div class="cols"><button id="btnDiv" onclick="toggleclass(this);monday();" class="class1"><h5>MONDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv1" onclick="toggleclass(this);tuesday();" class="class1"><h5>TUESDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv2" onclick="toggleclass(this);wednesday();" class="class1"><h5>WEDNESDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv3" onclick="toggleclass(this);thursday();" class="class1"><h5>THURSDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv4" onclick="toggleclass(this);friday();" class="class1"><h5>FRIDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv5" onclick="toggleclass(this);saturday();" class="class1"><h5>SATURDAY</h5></button></div>
                        <div class="cols"><button id="btnDiv6" onclick="toggleclass(this);sunday();" class="class1"><h5>SUNDAY</h5></button></div>
                        <div class="cols"><button id="hey" onclick="toggleclass(this);daily();showdaily();" class="class1"><h5>DAILY</h5></button></div>   

$（文档）.ready（函数（）{
$（'#嘿'）。单击（函数（）
{
如果（$（'#btnDiv，#btnDiv1，#btnDiv2，#btnDiv3，#btnDiv4，#btnDiv5，#btnDiv6'）。hasClass（'class1'））{
$（“#btnDiv，#btnDiv1，#btnDiv2，#btnDiv3，#btnDiv4，#btnDiv5，#btnDiv6'）。toggleClass（'class2'））
}否则{
$（“#btnDiv，#btnDiv1，#btnDiv2，#btnDiv3，#btnDiv4，#btnDiv5，#btnDiv6'）。toggleClass（'class2'））
}
});
});
星期一
星期二
星期三
星期四
星期五
星期六
星期天
每日的

但它不起作用。请帮帮我

我该怎么做才能让daily按钮在单击时将其他按钮（如果单击了）的样式更改为class 1，然后再次更改回class 2

---

使用原始JavaScript的简单回答会让我非常感激，因为我对JavaScript非常陌生：）

您可以这样做：

<style>
  .class1 {
    color: red;
  }
  .class2 {
    color: green;
  }
</style>

<div>
<button class="class1" onclick="changeClass(event)">Click me</button>
<button class="class1" onclick="changeClass(event)">Click me</button>
</div>

<script>
function changeClass(e) {
    if (e.target.className.trim() === 'class1') {
     e.target.className = 'class2';
  } else {
     e.target.className = 'class1';
  }
}

</script>

.1级{
颜色：红色；
}
.2级{
颜色：绿色；
}
点击我
点击我
函数类（e）{
if（e.target.className.trim（）=='class1'）{
e、 target.className='class2'；
}否则{
e、 target.className='class1'；
}
}

工作示例：

如果您将此作为一个“学习练习”，那么您对所有额外的HTML都没有好处。我甚至想去掉包含每个按钮的div，但那只是我自己

所以我会发布一个起点，但这只是一个即兴的东西，YMMV。从逻辑上讲，仔细了解您实际希望发生的事情：单击一个按钮时，您希望将所有其他按钮设置为“class1”，然后您希望将当前单击的按钮设置为“class2”。使用javascript classList属性进行研究，这非常方便

我确实编辑了这个，因为您希望切换单击的按钮，所以现在代码将所有同级按钮设置回class1，但最后两行实际上切换class1/class2，而不是强制打开按钮。有关如何使用classList的更多信息，请参阅

第三次通过。您不仅希望能够切换类，还希望“全选”按钮能够切换所有选择？将它们全部打开、全部关闭，还是简单地切换每一个？我得到了它，所以点击“每日”将切换所有选定的按钮。再一次，大部分是即兴表演，大部分是在这里演奏

根据您的评论，单击“每日”将全天按钮切换为class1。我已经注释掉了day handling中的部分，以使day selection具有排他性，但如果需要，它仍然存在

//首先，存储对我们要操作的位的引用。
var菜单=document.querySelector（“菜单1”）；
var dayBtnEls=document.queryselectoral（“.day按钮”）；
var allBtnEl=document.querySelector（“#hey”）；
//现在，我不再将它们添加到HTML中，而是
//附加我的事件侦听器。菜单在听
//点击按钮和“#嘿”按钮
//还有一个听众。我本来可以做到的
//在单个菜单侦听器中，就是这样
//还检查单击的按钮是否为#嘿，但是
//我想“嘿……”
菜单.addEventListener（“单击”，切换日期）；
allBtnEl.addEventListener（“单击”，Toggall）；
/****
*在不确定的情况下，我只是简单地设置了
*toggleAll函数将全天运行
*按钮并切换其class1/class2。所以
*选择其中一个按钮并单击“每日”
*将保留除该选项外的所有选项。
*这真的取决于你想要什么切换
*行为，这只是一个什么的例子
*你可以。
****/
函数toggleAll（事件）{
如果（event.target.innerText==“全选”）{
//经历一整天。
对于（var i=0；我首先自己尝试，而不是跳到完全解决方案。伙计，老实说，我没有尝试过任何有效的方法…我是JavaScription的新手，请发布一个您首先尝试过的方法的示例，然后我们将很乐意提供帮助。您说您没有尝试过任何有效的方法…您尝试过什么？这就是我们要问的问题。我发布了一个解决方案“工作，"但是如果不知道你有什么不起作用，你就永远无法真正理解它为什么不起作用。如果我给你代码，你就有了代码。如果你必须修复代码，你就有了概念。啊，那么你使用jQuery来解决这个问题吗？这就是美元通常所表示的。如果单击星期一到星期天，按钮不会改变，并且每天都不会改变做任何事。我在这里真的很困惑。我对Javascript知之甚少。你在使用什么浏览器？我通常使用google chrome，但我最近开始使用Mozilla FirefoxWell，我在firefox、chrome、旧版IE和Safari上看过它。它正在做我要求它做的事情。你打开了开发者控制台吗？你明白了吗我说过，在我的每一个浏览器中，它都工作正常。它没有做任何事情吗？它做了一些意想不到的事情吗？你在控制台中看到任何错误消息吗？“不工作”是相当模糊的。