Question

我想用图像替换切换按钮。我想知道是否有办法通过简单地在代码中添加背景来实现这一点。理想情况下，我想简单地添加像＆lt; button background =“url”＆gt;

以下是我正在使用的代码：

<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

要做的关键事情是：

使用div而不是<button>
使用background:url()添加背景图片。 确保div足够大（高度/宽度）以包含图像或图像不会显示
使用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;}

用图像替换jquery切换按钮

1 个答案: