Javascript 如何在单击按钮时切换按钮的外观？

我已经创建了一个按钮：'.switch'，它在两个div'.gi'和'.nogi'之间切换-这很好，但我似乎无法使.switch外观本身在单击时发生更改

我尝试过使用toggle和toggleClass的函数，这两个函数都不适合我

这个页面是实时的

您会注意到有两个按钮，一个以红色突出显示GI，另一个以突出显示NOGI。理想情况下，我希望最初高亮显示Gi，隐藏NOGI，它会随着下面的div一起切换onClick。 谢谢

$（'div.nogi，div.switched'）.hide（）；
$（“.switch”）。打开（“单击”，函数（）{
$（'div.gi，div.nogi'）.toggle（）；
$（'div.switch，div.switched'）.toggle（）；
});
.switch，
.转换{
保证金：自动；
显示：块；
宽度：120px；
高度：40px；
}
.gi开关{
显示：内联块；
浮动：左；
宽度：50%；
高度：40px；
背景：#cd3046；
边界半径：15px 0px 0px 15px；
光标：指针；
}
.gi交换{
显示：内联块；
浮动：左；
宽度：50%；
高度：40px；
背景：#232528；
边界半径：15px 0px 0px 15px；
光标：指针；
}
.nogi开关{
显示：内联块；
浮动：对；
宽度：50%；
高度：40px；
背景：#232528；
边界半径：0px 15px 15px 0px；
光标：指针；
}
nogi先生{
显示：内联块；
浮动：对；
宽度：50%；
高度：40px；
背景：#cd3046；
边界半径：0px 15px 15px 0px；
光标：指针；
}

胃肠道
无胃肠道
我不知道为什么
.toggleClass（）
不适合你。您可以这样使用它：

$('.switch .gi-switch').toggleClass('gi-switched');
$('.switch .nogi-switch').toggleClass('nogi-switched');

如果您将其添加到onclick函数中，您应该会得到接近您想要的东西


$（'div.nogi'）.hide（）；
$（“.switch”）。打开（“单击”，函数（）{
$（'div.gi，div.nogi'）.toggle（）；
$（'.switch.gi switch'）.toggleClass（'gi-switched'）；
$（'.switch.nogi-switch'）.toggleClass（'nogi-switched'）；
});
.switch，
.转换{
保证金：自动；
显示：块；
宽度：120px；
高度：40px；
}
.gi开关{
显示：内联块；
浮动：左；
宽度：50%；
高度：40px；
背景：#cd3046；
边界半径：15px 0px 0px 15px；
光标：指针；
}
.gi交换{
显示：内联块；
浮动：左；
宽度：50%；
高度：40px；
背景：#232528；
边界半径：15px 0px 0px 15px；
光标：指针；
}
.nogi开关{
显示：内联块；
浮动：对；
宽度：50%；
高度：40px；
背景：#232528；
边界半径：0px 15px 15px 0px；
光标：指针；
}
nogi先生{
显示：内联块；
浮动：对；
宽度：50%；
高度：40px；
背景：#cd3046；
边界半径：0px 15px 15px 0px；
光标：指针；
}

胃肠道
无胃肠道
您能在问题中添加一些html吗？在使用库之前先了解DOM API的工作原理。@ksav done，html addedthanks为此，我们即将开始。现在出现了一个新问题，.gi和.nogi不能正确切换，请检查live页面它似乎在为我切换。你在寻找什么样的行为？它的切换，但是“.switched”始终可见，并且.nogi根本不显示。似乎是我无意中复制了
$（'div.nogi，div.switched'）.hide（）并将其放入onClick方法中。删除该选项将允许显示
div.nogi
，我现在使用的方式不需要原来的第二组按钮。它改变了一个集合上的类，而这个集合又改变了它们的颜色。您可以卸下第二组按钮开关，并卸下切换
div.switched
的部件。我已经更新了我的答案。