iPhone 모바일 웹에서 div 클래스를 변경하는 방법

Question

div로 구성된 버튼이 4 개 있습니다. 이 div는 같은 페이지에서 다른 div의 표시/숨기기 상태를 제어합니다. div에는 현재 각 div (버튼) 안에 복사 지점이 있습니다. 사용자가 div (버튼)를 선택하면 각 div의 배경색을 "selected state"로 변경해야합니다. 이는 "활성/비활성"상태라고도합니다. 사용자가 배경 색상과 각 div 내의 텍스트 색상을 변경하여 선택한 div (버튼)를 알기를 원합니다.

저는 CSS, 자바 스크립트 또는 다른 제안을 통해이 작업을 수행하고 싶습니다. 나는 현재 내 CSS의 div (버튼)에 그라데이션 배경을 사용하고 있습니다.

사이트를 살펴본 결과 4 개의 탭, 버튼, 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;} 

Answer 1

이 jQuery를 함께 간단하다 :

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

기본적으로 각 div에 대해 CSS 클래스를 교체하면 productNotSelectedBtn 및을 토글합니다.

jsfiddle에 그것을 밖으로 시도 : AS를 http://jsfiddle.net/ArtBIT/vHyHz/2/