将Div替换为另一个Div

问题描述

我试图去做这件事。我有一个地图的主要图片，并在该地图中有地区。这些地区有热点，所以你可以点击它们，它将只替换整个地图。 （只是一个简单的 div swap）。

我需要它作为 div ，因为在这个 div 我列出了热点。

总共有4个 div ，我需要这样做。

如果有人能帮助我，那真是太棒了！

因此，表中列出的链接需要将图像替换为单独的 div 。

 < tr class =thumb>< / tr> 
< td>所有区域（显示主图）（链接）< / td> 
< / tr> 
 
< tr class =thumb>< / tr> 
< td>北部地区（link）< / td> 
< / tr> 
 
< tr class =thumb>< / tr> 
< td>南部地区（link）< / td> 
< / tr> 
 
< tr class =thumb>< / tr> 
< td>东部地区（link）< / td> 
< / tr> 
< / table> 
 
 
< div>所有地区图片< / div> 
< div>北方图片< / div> 
< div>南方图片< / div> 
< div>东方图片< / div> 
  

我不允许发布图片，因为我没有足够的积分，所以我知道图片链接 =noreferrer> .replaceWith（）

 < script src =https://ajax.googleapis.com /ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div id =地图> < div class =region>< a href =link1> region1< / a>< / div> < div class =region>< a href =link2> region2< / a>< / div> < div class =region>< a href =link3> region3< / a>< / div>< / div>  

I have this thing I m trying to do. I have a main picture of a map and within that map there are regions. These regions have hot spots on them so you can click them and it will replace the whole map with only the region. (just a simple div swap).

I need it as a div because in this div i have the hot spots listed.

There are a total of 4 divs that I am going to need to do this with.

If anyone could help me that would be awesome!

So links that are listed in a table need to replace the image in a separate div.

<tr class="thumb"></tr>
<td>All Regions (shows main map) (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Northern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Southern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Eastern Region (link)</td>
</tr>
</table>


<div>All Regions image</div>
<div>northern image</div>
<div>southern image</div>
<div>Eastern image</div>

I am not allowed to post images because I don't have enough points so I know the image links wont work.

解决方案

You can use .replaceWith()

$(function() {

  $(".region").click(function(e) {
    e.preventDefault();
    var content = $(this).html();
    $('#map').replaceWith('<div class="region">' + content + '</div>');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="map">
  <div class="region"><a href="link1">region1</a></div>
  <div class="region"><a href="link2">region2</a></div>
  <div class="region"><a href="link3">region3</a></div>
</div>

这篇关于将Div替换为另一个Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！