我正在寻找通过链接使用 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”,然后当您单击“巧克力”链接时,div 类将更改为“sprite sprite-chocolate”等。
任何帮助表示赞赏(我对精灵完全陌生,没有Java经验)。
使用的精灵:http: //puu.sh/3otqm.png