Question

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

任何帮助都表示赞赏（我对精灵很新，并且没有java expierence）。

使用的精灵： http://puu.sh/3otqm.png

Answer 1

使用这个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>

然后将data属性添加到您的每个链接中，如下所示：

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

这应该可以解决问题。

Answer 2

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

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

data- *属性在HTML 5中完全有效。

Javascript - 需要jQuery

jQuery(document).on("ready", function() { 
   jQuery('.flavor').bind('click', function(e) {
      jQuery('#container').attr('class', 'sprite sprite-' + jQuery(this).data('flavor'));
      e.stopPropagation();
   });
});

<强>演示

是的，the demo。

通过链接替换div类

2 个答案: