Question

我有一个系统，可以生成指向应用程序不同部分的链接。我需要根据链接的上下文在链接旁边添加一个图像。在CSS中我会这样做：

a {    
 color:#FF6600;
 padding-right:50px;
 background-image: url('images/system.png');
 background-position: right;
 background-repeat: no-repeat;

}

上述CSS规则的问题是所有链接都获得相同的图像。如果链接有class =“system”，则必须附加system.png，如果得到class =“actions”，则必须附加action.png 。我猜我可以使用jQuery来做这个，任何指针？

Answer 1

a {
    color: #f60;
    padding-right: 50px;
    background-position: right;
    background-repeat: no-repeat;
}

a.system {
    background-image: url("images/system.png");
}

a.actions {
    background-image: url("images/actions.png");
}

Answer 2

使用

a.system{
background-image: url('images/system.png');
.....
}
a.actions{
background-image: url('images/action.png');
....
}

Answer 3

为链接添加ID。使用jQuery选择每个ID，并更改其background-image属性以匹配您所需的ID。

示例：

代表<a id="house" src="house.html">my house</a>

执行：

$("#house").attr("background-image", "house.png");。

当然，只要他们的ID暗示您需要设置的图像，您就可以以编程方式迭代所有链接。

根据内容将图像附加到链接

3 个答案: