Javascript 如何在iPhone mobile web上单击（点击）更改div类

我有4个按钮，内置为div。这些div控制同一页面上其他div的显示/隐藏状态。div当前包含每个div内部的复制点（按钮）。一旦用户选择了一个div（按钮），每个div的背景色需要更改为“选定状态”。这也可以称为“活动/非活动”状态。我希望用户通过更改每个div中的背景颜色和文本颜色来知道他们选择了哪个div（按钮）

我想用CSS、Javascript或你们可能有的任何其他建议来实现这一点。我目前在css中为div（按钮）使用渐变背景

我在网站上看了看，找不到4个标签、按钮和div。只有两个。这是我的第一篇帖子，如果我不清楚，我道歉。提前谢谢

以下是我的div（按钮）HTML：

---

这对于jQuery来说是微不足道的：

jQuery('#row1 a, #row2 a').click(function(){
    jQuery(this).find('div').toggleClass('productNotSelectedBtn productSelectedBtn');
});

基本上只需为每个div交换css类，切换

productNotSelectedBtn

和

productSelectedBtn

---

​在jsfiddle上尝试一下：

作为旁白，您应该始终将非供应商前缀规则列在最后（

linear gradient

）。

.productNotSelectedBtn{
background-image: linear-gradient(bottom, rgb(0,57,98) 20%, rgb(42,91,126) 60%);
background-image: -o-linear-gradient(bottom, rgb(0,57,98) 20%, rgb(42,91,126) 60%);
background-image: -moz-linear-gradient(bottom, rgb(0,57,98) 20%, rgb(42,91,126) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(0,57,98) 20%, rgb(42,91,126) 60%);
background-image: -ms-linear-gradient(bottom, rgb(0,57,98) 20%, rgb(42,91,126) 60%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.2, rgb(0,57,98)),
color-stop(0.6, rgb(42,91,126)));}
.productSelectedBtn{
background-image: linear-gradient(bottom, rgb(231,231,231) 42%, rgb(254,254,254) 71%);
background-image: -o-linear-gradient(bottom, rgb(231,231,231) 42%, rgb(254,254,254) 71%);
background-image: -moz-linear-gradient(bottom, rgb(231,231,231) 42%, rgb(254,254,254) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(231,231,231) 42%, rgb(254,254,254) 71%);
background-image: -ms-linear-gradient(bottom, rgb(231,231,231) 42%, rgb(254,254,254) 71%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.42, rgb(231,231,231)),
color-stop(0.71, rgb(254,254,254)));
-moz-box-shadow:    inset 0 0 5px #000000;
-webkit-box-shadow: inset 0 0 5px #000000;
box-shadow:         inset 0 0 5px #000000;}

jQuery('#row1 a, #row2 a').click(function(){
    jQuery(this).find('div').toggleClass('productNotSelectedBtn productSelectedBtn');
});