0

我有 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;}
4

1 回答 1

0

这对于 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/

于 2012-04-06T22:57:08.667 回答