Question

我在svg文件格式中有8个图像重叠了一个。它类似于标签菜单栏。我有一个用于计费的标签，当该标签处于活动状态时，必须在后面找到所有其他标签，如果我点击另一个标签，如员工，标签必须处于活动状态，其他标签必须处于非活动状态。我需要在两个图像之间切换。因此我试用了这段代码。

.gold1 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold2 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold3 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold4 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold5 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold6 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold7 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gold8 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray2 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray3 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray4 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray5 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray6 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray7 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.gray8 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

<script>
  jQuery("#infoToggler").click(function() {
        jQuery(this).find('img').toggle();
});
</script>
<img src="gray2.svg" class="gray2">
<img src="gray3.svg" class="gray3">
<img src="gray4.svg" class="gray4">
<img src="gray5.svg" class="gray5">
<img src="gray6.svg" class="gray6">
<img src="gray7.svg" class="gray7">
<img src="gray8.svg" class="gray8">
<div id="infoToggler">
  <img src="gold1.svg" class="gold1" />

  <img src="gray1.svg" class="gray1" style="display:none/>

</div>

有人可以帮我编码吗？

Answer 1

使用您在第一条评论中提供的jsFiddle我已将其更新为与您的相似。

这里是jsFiddle链接http://jsfiddle.net/M9QBb/372/和Html / Css / jQuery代码

HTML

plane1.transform( 't' + parseInt(movePoint.x - 350) + ',' + parseInt( movePoint.y - 700) + 'r' + (180 + movePoint.alpha));

CSS

<div id="infoToggler">
    <img src="gold1.svg" class="image1" />
    <img src="gray1.svg" class="image2" style="display:none" />
</div>

的jQuery

.image1 {
    background-color: #F00;
    width: 150px;
    height: 150px;
}
.image2 {
    background-color: #0F0;
    width: 150px;
    height: 150px;
}

Answer 2

这是一种错误的做法。您需要在2张图片之间切换。我没有看到你将切换应用到2张图片的位置。

最简单的是：点击：隐藏全部并显示点击的。

在两个图像之间切换对我不起作用？

2 个答案: