我希望通过链接使用 javascript 替换 DIV 使用的类。
CSS:
#container {
width: 176px;
height: 250px;
margin: 0 auto 0 auto;
padding: 0;
}
#wrapper {
width: 176px;
height: 250px;
margin: 0 auto 0 auto;
padding: 0;
}
.sprite {
background-image: url(sprite1.png);
background-repeat: no-repeat;
display: block;
}
.sprite-caramel {
width: 176px;
height: 250px;
background-position: 0 0;
}
.sprite-chocolate {
width: 176px;
height: 250px;
background-position: -176px 0;
}
.sprite-empty {
width: 176px;
height: 250px;
background-position: -352px 0;
}
.sprite-strawberry {
width: 176px;
height: 250px;
background-position: -528px 0;
}
.sprite-vanilla {
width: 176px;
height: 250px;
background-position: -704px 0;
}
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container" class="sprite sprite-empty"></div>
<ul id="wrapper">
<li><a href="#">Chocolate</a></li>
<li><a href="#">Vanilla</a></li>
<li><a href="#">Strawberry</a></li>
</ul>
</body>
</html>
我希望 DIV 下方的链接在单击时将分配的类的类交换到所述链接。因此，默认情况下，div 应显示类“sprite sprite-empty”，然后当您单击“Chocolate”链接时，div 类将更改为“sprite sprite-chocolate”等。
感谢任何帮助(我对 Sprite 完全陌生，没有 Java 经验)。
使用的 Sprite : http://puu.sh/3otqm.png
最佳答案
使用这个jQuery(需要引用jQuery库)
<script type="text/javascript">
$(function () {
$("#wrapper a").on("click", function () {
var selected_sprite = $(this).data("sprite");
$("#container").attr("class", "sprite " + selected_sprite);
});
});
</script>
然后将数据属性添加到每个链接，如下所示:
<ul id="wrapper">
<li><a href="#" data-sprite="sprite-chocolate">Chocolate</a></li>
<li><a href="#" data-sprite="sprite-vanilla">Vanilla</a></li>
<li><a href="#" data-sprite="sprite-strawberry">Strawberry</a></li>
</ul>
这应该可以解决问题。
关于javascript - 通过链接替换 div 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17310846/