如何根据li活动状态设置image src？

Question

我有以下代码

<li><a href="/business/account" id="accountLnk" class="list-group-item"><img src="/business/resources/images/btn_dashboard.png" height="100px" width="70%" class="img-responsive img-rounded center-block"></a></li>

当li有btn_dashboard_active.png

时，我想将img src更改为class="active"

如何在CSS或Bootstrap中执行此操作？

Answer 1

您可以通过删除 IMG 标记内的 src ， height ， width 属性来实现这一目标。然后在CSS中设置它们（就像在下面的jsFiddle示例中一样），并提到图像路径（ src 属性中的链接）将成为 content 的值。

当li具有类活动时显示不同的图像，只需更改 li.active＆gt;内的内容的值（路径）a＆gt; img < / em> selector。

li.active>a>img{
content:url("/business/resources/images/btn_dashboard_active.png");
}

示例：http://jsfiddle.net/L3qsmeje/

Answer 2

使用按需显示的交替图像。

HTML：

<li>
<a href="/business/account" id="accountLnk" class="list-group-item">
<img src="/business/resources/images/btn_dashboard.png" height="100px" width="70%" class="img-normal img-responsive img-rounded center-block">
<img src="/business/resources/images/btn_dashboard_active.png" height="100px" width="70%" class="img-active img-responsive img-rounded center-block">
</a>
</li>

的CSS：

li .img-normal, li.active .img-active{
    display:block;
}
li .img-active, li.active .img-normal{
    display:none;
}