用另一个 Div 替换 Div答案

【问题标题】：Replace Div with another Div用另一个 Div 替换 Div
【发布时间】：2011-07-01 01:54:39
【问题描述】：

我正在尝试做这件事。我有一张地图的主要图片，并且在该地图中有区域。这些区域上有热点，因此您可以单击它们，它将仅用该区域替换整个地图。（只是一个简单的div 交换）。

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

我总共需要使用 4 个divs 来执行此操作。

如果有人可以帮助我，那就太棒了！

因此，表格中列出的链接需要将图像替换为单独的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>

我不能发布图片，因为我没有足够的积分，所以我知道图片链接不起作用。

【问题讨论】：

我认为你应该添加一些代码
@jake - 欢迎来到 Stackoverflow。我有一个建议给你。如果你能显示一些代码就更好了。比如问题出在哪里——或者到目前为止你经历了什么。这样，想回答的人也可以给你一个更好的答案。 ;) 干杯！
很高兴，谢谢，现在我要进行编辑了。非常感谢您的帮助和支持！马上更新！
所以几乎所有区域一次只能显示 1 个，在页面加载时加载所有区域图像，然后当您单击链接时，它会更改为相关图片。跨度>
这段代码够用吗？

标签： jquery html swap

【解决方案1】：

您可以使用.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 中的图像。我在我原来的任务中放了一些代码来寻找我正在寻找的结构。非常感谢您的帮助
像魅力一样工作！谢谢。

【解决方案2】：

HTML

<div id="replaceMe">i need to be replaced</div>
<div id="iamReplacement">i am replacement</div>

JavaScript

jQuery('#replaceMe').replaceWith(jQuery('#iamReplacement'));

【讨论】：

【解决方案3】：

这个should可以帮助你

HTML

<!-- pretty much i just need to click a link within the regions table and it changes to the neccesary div. -->

<table>
<tr class="thumb"></tr>
    <td><a href="#" class="showall">All Regions</a> (shows main map) (link)</td>   

<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>
<br />

<div id="mainmapplace">
    <div id="mainmap">
        All Regions image
    </div>
</div>
<div id="region">
    <div class="replace">northern image</div>
    <div class="replace">southern image</div>
    <div class="replace">Eastern image</div>
</div>

JavaScript

var originalmap;
var flag = false;

$(function (){

    $(".replace").click(function(){
            flag = true;
            originalmap = $('#mainmap');
            $('#mainmap').replaceWith($(this));
        });

    $('.showall').click(
        function(){
            if(flag == true){
                $('#region').append($('#mainmapplace .replace'));                
                $('#mainmapplace').children().remove();
                $('#mainmapplace').append($(originalmap));
                //$('#mapplace').append();
            }
        }
    )

})

CSS

#mainmapplace{
    width: 100px;
    height: 100px;
    background: red;
}

#region div{
    width: 100px;
    height: 100px;
    background: blue;
    margin: 10px 0 0 0;
}

【讨论】：