如何更改 iPhone 移动网络的点击（点击）div 类答案

【问题标题】：How to change a div class on click (tap) for iPhone mobile web如何更改 iPhone 移动网络的点击（点击）div 类
【发布时间】：2012-04-06 21:48:15
【问题描述】：

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

我想通过 CSS、Javascript 或你们可能提出的任何其他建议来完成此任务。我目前在我的 css 中为 div(buttons) 使用渐变背景。

我在网站上查看过，但找不到使用 4 个选项卡、按钮和 div 来完成此操作。只有两个。这是我的第一篇文章，所以如果我不清楚，我很抱歉。提前致谢

这是我的 div（按钮）HTML：

<div id="row1">
    <a id="buttonToggle1" href="#" ><div class="width145 paddingFloaterCell floatlft productSelectedBtn btnBorderBtm"><span class="bby_blue"><strong>Product Name</strong></span><br><span class="red_text"><strong>$100</strong></span></div></a><a id="buttonToggle2" href="#" ><div class="btnBorderLft width146 paddingFloaterCell floatrt productNotSelectedBtn"><span class="textWhite"><strong>Product Name</strong></span><br><span class="textYellow"><strong>$100</strong></span></div></a>
</div>

<div id="row2">
    <a id="buttonToggle3" href="#" ><div class="width145 paddingFloaterCell floatlft productNotSelectedBtn"><span class="textWhite"><strong>Product Name</strong></span><br><span class="textYellow"><strong>Sale: $100</strong></span></div></a><a id="buttonToggle4" href="javascript:showonlyone('productSelected4');" ><div class=" btnBorderLft width146 paddingFloaterCell floatrt productNotSelectedBtn"><span class="textWhite"><strong>Product Name</strong></span><br><span class="textYellow"><strong>Sale: $100</strong></span></div></a>
</div>

" 一些CSS：

.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;}

【问题讨论】：

顺便说一句，您应该始终将非供应商前缀规则列在最后 (linear-gradient)。

标签： javascript iphone css html

【解决方案1】：

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

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

你基本上只是为每个 div 交换 css 类，你切换 productNotSelectedBtn 和 productSelectedBtn

在 jsfiddle 上试用：http://jsfiddle.net/ArtBIT/vHyHz/2/

【讨论】：