用图像替换 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

要做的关键事情是：

1. 使用 div 而不是 <button>

2. 使用background:url()添加背景图片。 确保 div 足够大 (height/width) 以包含图像，否则图像将不会显示

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