Javascript 通过链接替换div类_Javascript_Html_Css_Sprite

Javascript 通过链接替换div类

javascript html css

Javascript 通过链接替换div类,javascript,html,css,sprite,Javascript,Html,Css,Sprite,我希望通过链接使用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-ima

我希望通过链接使用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>

<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>

HTML:

#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>

<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”等

非常感谢您的帮助（我对sprites完全陌生，没有java经验）

精灵使用：

就像我之前发布的问题一样，在这里

HTML

<div id="container" class="sprite sprite-empty"></div>
   <ul id="wrapper">
      <li><a href="#" class="flavor" data-flavor="chocolate">Chocolate</a></li>
      <li><a href="#" class="flavor" data-flavor="vanilla">Vanilla</a></li>
      <li><a href="#" class="flavor" data-flavor="strawberry">Strawberry</a></li>
   </ul>
</body>

演示

是的。

使用这个jQuery（需要参考jQuery库）


$（函数（）{
$（“#包装器a”）。在（“单击”上，函数（）{
var selected_sprite=$（此）.data（“sprite”）；
$（“#容器”）.attr（“类”、“精灵”+选定精灵）；
});
});

然后向每个链接添加数据属性，如下所示：

<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>

这应该可以解决问题。

哪一个“问题之前”？OP没有jQuery标记。如果有，您应该解释flavor类和data属性的用法，并提供停止传播的原因。@RobG，我指的是这个问题：