如何切换SVG图像

我有两个SVG图像文件。当我点击一个图像时，必须显示另一个图像（类似于标签）。我用下面的试了一下：如何切换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>

这些都是4级我在CSS。我需要分别显示2图像和切换2图像。像标签菜单，当我点击一个标签图像必须切换，如果我点击另一个必须切换的标签。当我点击image1时，必须显示image2，如果我点击image3则必须显示image4

来源

2015-07-21 Sundar Nivash

正常工作...你得到任何误差的n个控制台？ –

http://jsfiddle.net/jn0bpevc/1/工作正常 –

哈哈谁编辑的问题，请检查你做了什么来链接..之前工作.. –

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

来源

2015-07-21 09:40:15 Virat

感谢您的支持。现在我需要Tab结构菜单 –

如何切换SVG图像

回答

相关问题