Tengo esta cosa que estoy tratando de hacer. Tengo una imagen principal de un mapa y dentro de ese mapa hay regiones. Estas regiones tienen puntos calientes en ellas, por lo que puede hacer clic en ellas y reemplazará todo el mapa con solo la región. (solo un simple cambio de div ).
Lo necesito como div porque en este div tengo los puntos calientes enumerados.
Hay un total de 4 div s con los que necesitaré hacer esto.
¡Si alguien pudiera ayudarme sería increíble!
Por lo tanto, los enlaces que se enumeran en una tabla deben reemplazar la imagen en un div separado.
<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>No tengo permitido publicar imágenes porque no tengo suficientes puntos, así que sé que los enlaces de las imágenes no funcionarán.
Puedes usar .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>HTML
<div id="replaceMe">i need to be replaced</div> <div id="iamReplacement">i am replacement</div>JavaScript
jQuery('#replaceMe').replaceWith(jQuery('#iamReplacement'));esto debería ayudarte
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; }