2

我正在寻找通过链接使用 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

4

2 回答 2

2

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

这应该够了吧。

于 2013-06-26T03:13:01.123 回答
1

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

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();
   });
});

演示

是的，演示。

于 2013-06-26T03:08:11.033 回答