jquery 토글 버튼을 이미지로 바꾸기

Question

토글 버튼을 이미지로 바꾸고 싶습니다. 코드에 배경을 추가하는 것만으로이 작업을 수행 할 수 있는지 궁금합니다. 이것은 그것을 할 것입니다

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $(this).next().toggle(); 

    }); 
}); 
</script> 

<button>Basic</button> 
<div class="basic1" style="display:none;"> 
<p>SAMPLE TEXT....</p> 
</div> 

<button>Advanced</button> 
<div class="basic1" style="display:none;"> 
<p>SAMPLE TEXT....</p> 
</div> 

Answer 1

:

jsFiddle Demo

이상적으로 나는 단순히 여기에

내가 사용하고있는 코드> < 버튼 배경 = "URL"같은 것을 추가하고 싶습니다 할 일은 다음과 같습니다.

1. v 대신 a <button>

2. background:url()을 사용하여 배경 이미지를 추가하십시오. 사업부를 확인 이미지를 포함 할 수있을만큼 충분히 (높이/폭) 크거나 이미지가 버튼을 클릭 할

3. 사용 jQuery를 표시하지 않습니다

HTML :

<div id="btnBasic">Basic</div> 
<div class="basic1" style="display:none;"> 
    <p>SAMPLE TEXT....</p> 
</div> 

<div id="btnAdv">Advanced</div> 
<div class="basic1" style="display:none;"> 
    <p>SAMPLE TEXT....</p> 
</div> 

js/jQuery :

$("div[id^='btn']").click(function(){ 
    $(this).next().toggle(); 
}); 

CSS :

#btnBasic{height:42px;width:150px;background:url(http://placekitten.com/g/148/40) no-repeat;color:yellow;font-weight:bold;padding:5px 30px;} 
#btnAdv{height:42px;width:150px;background:url(http://placekitten.com/g/146/38) no-repeat;color:yellow;font-weight:bold;padding:5px 30px;} 
div[id^='btn']:hover{cursor:pointer;}