Question

我有两个SVG图像文件。当我点击图像时，必须显示另一个图像（类似于标签）。我尝试了以下内容：

jQuery("#infoToggler").click(function() {
  jQuery(this).find('img').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="infoToggler">
  <img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px" />
  <img src="http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png" width="60px" height="60px" style="display:none" />
</div>

JSFiddle here

这不起作用。有人可以帮助我吗？

修改01

<html>
<head>

    .image{
    position:absolute;
    top:10px;
    left:10px;
    z-index:1;
    }
    .image1{
    position:absolute;
    top:10px;
    left:10px;
    z-index:1;
    }
    .image3{
    position:absolute;
    top:10px;
    left:10px;
    z-index:1;
    }
    .image4{
    position:absolute;
    top:10px;
    left:10px;
    z-index:1;
    }
</head>
<body>
<img src="image1.svg" class="image"/>
<img src="image2.svg" class="image1"/>
<img src="image3.svg" class="image2"/>
<img src="image4.svg" class="image3"/>
</body>
</html>

这些是我在CSS中的4个类。我需要分别显示2个图像并切换2个图像。当我单击一个选项卡图像时必须切换选项卡菜单，如果我单击另一个必须切换的选项卡。当我点击image1时，必须显示image2，如果点击image3，则必须显示image4

Answer 1

我创建了jsfiddle样本。

Visit SVG image toggle jsfiddle

$("#svgImg").on("click", function() {
    if(flag) {
        $(this).attr("xlink:href", "http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png");
        flag = false;
    }
    else {
        $(this).attr("xlink:href", "http://tympanus.net/PausePlay/images/play.png");
        flag = true;
    }
});

如何在SVG图像之间切换

1 个答案: