divとして構築された4つのボタンがあります。これらの div は、同じページ上の他の div の表示/非表示の状態を制御します。div には現在、各 div(button) 内にコピー ポイントが含まれています。ユーザーが div(ボタン) を選択したら、各 div の背景色を「選択状態」に変更する必要があります。これは、「アクティブ/非アクティブ」状態と呼ばれることもあります。背景色と各 div 内のテキストの色を変更することで、ユーザーがどの div(ボタン) を選択したかをユーザーに知らせたいと考えています。
CSS、Javascript、またはその他の提案を使用してこれを実現したいと思います。現在、css の div(buttons) にグラデーションの背景を使用しています。
私はサイトを見てきましたが、これが 4 つのタブ、ボタン、div で行われていることがわかりません。2つだけ。初めての投稿なので、わかりにくかったらすみません。前もって感謝します
これが私の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;}