2

El siguiente codigo muestra una serie de banderas, al pasar click sobre la bandera de inglaterra, se muestran más banderas como:

  • la de alemania,
  • holanda,
  • etc.

¿Cómo hago para que la bandera cambie de posicion por la otra al hacer click en ella?

Me explico, si eligo la de alemania, tiene que cambiar de posicion con la de inglaterra, y asi sucesivamente con las demas.

El codigo HTML muestra una lista de banderas que son Inglaterra, Francia, Italia, Alemania y Holanda. El codigo Css, es el diseño de la lista, haciendolo un menu despegable.

<style type="text/css">
			
			* {
				margin:0px;
				padding:0px;
			}
			
			#header {
				margin:auto;
				width:500px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			ul, ol {
				list-style:none;
			}
			
			.nav > li {
				float:left;
			}
			
			.nav li a {
				background-color:#000;
				color:#fff;
				text-decoration:none;
				padding:10px 12px;
				display:block;
			}
			
			.nav li a:hover {
				background-color:#434343;
			}
			
			.nav li ul {
				display:none;
				position:absolute;
				min-width:50px;
			}
			
			.nav li:hover > ul {
				display:block;
			}
			
			.nav li ul li {
				position:relative;
			}
			
			.nav li ul li ul {
				right:-140px;
				top:0px;
			}
			
		</style>
<html>
	<head>
		<title>Menu Desplegable</title>
		<link href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' rel='stylesheet'/>
		
	</head>
	<body>
		<div id="header">
			<ul class="nav">
				
				<li><a href=""><img src="https://i.imgur.com/JfcgMq3.png" width="28" height="28" style="left:-5px;"/><i class="fas fa-caret-down" style="font-size:20px; color:#ffffff;"></i></a>
					<ul>
						<li><a href="#"><img src="https://i.imgur.com/skxVw7A.png" width="28" height="28" style="left:-5px;"/></a></a></li>
						<li><a href="#"><img src="https://i.imgur.com/iZzY1wO.png"width="28" height="28" style="left:-5px;"/></a></li>
						<li><a href="#"><img src="https://i.imgur.com/fVxPzVF.png" width="28" height="28" style="left:-5px;"/></a></li>
						<li><a href="#"><img src="https://i.imgur.com/Qaf0696.png" width="28" height="28" style="left:-5px;"/></a>
							
						</li>
					</ul>
				</li>
				
				</li>
			
			</ul>
		</div>
	</body>
</html>

1
  • No he intentado con Javascript porque no poseo los conocimientos suficientes para hacer el codigo que haga lo que quiero, por eso estoy publicando para que me puedan ayudar con eso.
    – Husdady
    el 6 may. 2020 a las 4:29

2 respuestas 2

3

Lo primero que haría es colocar un id a mi etiqueta a, que seria la bandera principal, también agregaría una class para el resto de las las banderas, en este caso la llamare flats. Una vez hecho esto con ayuda de JQuery crearía la función click para la clase flats, en donde intercambiaría las imagenes tal como deseas.

Ejemplo funcional:

$(".flats").click(function(){
  var src_principal=$("#principal img").attr("src");
  var src_flat=$(this).children("img").attr("src");
  $("#principal img").attr("src",src_flat);
  $(this).children("img").attr("src",src_principal);
})
<style type="text/css">
			
			* {
				margin:0px;
				padding:0px;
			}
			
			#header {
				margin:auto;
				width:500px;
				font-family:Arial, Helvetica, sans-serif;
			}
			
			ul, ol {
				list-style:none;
			}
			
			.nav > li {
				float:left;
			}
			
			.nav li a {
				background-color:#000;
				color:#fff;
				text-decoration:none;
				padding:10px 12px;
				display:block;
			}
			
			.nav li a:hover {
				background-color:#434343;
			}
			
			.nav li ul {
				display:none;
				position:absolute;
				min-width:50px;
			}
			
			.nav li:hover > ul {
				display:block;
			}
			
			.nav li ul li {
				position:relative;
			}
			
			.nav li ul li ul {
				right:-140px;
				top:0px;
			}
			
		</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
	<head>
		<title>Menu Desplegable</title>
		<link href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' rel='stylesheet'/>
		
	</head>
	<body>
		<div id="header">
			<ul class="nav">
				
				<li>
            <a href="" id="principal" ><img src="https://i.imgur.com/JfcgMq3.png" width="28" height="28" style="left:-5px;"/>                 <i class="fas fa-caret-down" style="font-size:20px; color:#ffffff;"></i>
            </a>
					<ul>
						<li>
                <a href="#" class="flats"><img src="https://i.imgur.com/skxVw7A.png" width="28" height="28" style="left:-5px;"/></a>
            </li>
						<li>
                <a href="#" class="flats"><img src="https://i.imgur.com/iZzY1wO.png"width="28" height="28" style="left:-5px;"/></a>
            </li>
						<li>
                <a href="#" class="flats"><img src="https://i.imgur.com/fVxPzVF.png" width="28" height="28" style="left:-5px;"/></a>
            </li>
						<li>
                <a href="#" class="flats"><img src="https://i.imgur.com/Qaf0696.png" width="28" height="28" style="left:-5px;"/></a>
						</li>
					</ul>
				</li>
				
				</li>
			
			</ul>
		</div>
	</body>
</html>

1
  • Muchas gracias #Shassain :)
    – Husdady
    el 6 may. 2020 a las 5:10
0

Ya que manifiestas no saber de JS para comenzar haré el sigueinte aporte:

  • Le asignas un id al elemento img principal o que aparece al inicio y que es al cual le quiere modificar el src
  • Al ul que contiene el listado de banderas que son las cuales a través de un click pasen su imagen a la principal el das una clase
  • Con JS puro recuperamos en 2 variables a los 2 puntos mencionados anteriormente
  • Vigilamos el evento click del ul que contiene a las imágenes para saber quien de ellas disparó dicho evento
  • Por dentro de la función tomamos a la variable que contiene a la bandera principal y le modificamos con setAttribute el atributo src

Quedando así:

    <html>
    	<head>
    		<title>Menu Desplegable</title>
    		<link href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' rel='stylesheet'/>
    		<style type="text/css">
    			
    			* {
    				margin:0px;
    				padding:0px;
    			}
    			
    			#header {
    				margin:auto;
    				width:500px;
    				font-family:Arial, Helvetica, sans-serif;
    			}
    			
    			ul, ol {
    				list-style:none;
    			}
    			
    			.nav > li {
    				float:left;
    			}
    			
    			.nav li a {
    				background-color:#000;
    				color:#fff;
    				text-decoration:none;
    				padding:10px 12px;
    				display:block;
    			}
    			
    			.nav li a:hover {
    				background-color:#434343;
    			}
    			
    			.nav li ul {
    				display:none;
    				position:absolute;
    				min-width:50px;
    			}
    			
    			.nav li:hover > ul {
    				display:block;
    			}
    			
    			.nav li ul li {
    				position:relative;
    			}
    			
    			.nav li ul li ul {
    				right:-140px;
    				top:0px;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="header">
    			<ul class="nav">
    				
    				<li><a href="#"><img id="principal" src="https://i.imgur.com/JfcgMq3.png" width="28" height="28" style="left:-5px;"/><i class="fas fa-caret-down" style="font-size:20px; color:#ffffff;"></i></a>
    					<ul class="contenedor-banderas">
    						<li><a  href="#"><img src="https://i.imgur.com/skxVw7A.png" width="28" height="28" style="left:-5px;"/></a></a></li>
    						<li><a  href="#"><img src="https://i.imgur.com/iZzY1wO.png"width="28" height="28" style="left:-5px;"/></a></li>
    						<li><a  href="#"><img src="https://i.imgur.com/fVxPzVF.png" width="28" height="28" style="left:-5px;"/></a></li>
    						<li><a  href="#"><img src="https://i.imgur.com/Qaf0696.png" width="28" height="28" style="left:-5px;"/></a>
    							
    						</li>
    					</ul>
    				</li>
    				
    				</li>
    			
    			</ul>
    		</div>
    	</body>
    <script>
      let bandera = document.querySelector("#principal")
      let banderas = document.querySelector(".contenedor-banderas")
      
      banderas.addEventListener("click", (evento) => {
        bandera.setAttribute("src", evento.target.src)
      })
    </script>
    </html>

Lecturas necesarias de revisión

4
  • Gracias!!, ambas respuestas solucionan mi problema, tengo una consulta, si todas las imagenes llevan un enlace, al ir a ese enlace, la imagen vuelve a ser la principal y no cambia a las otras, he creado este tema ya que estoy haciendo un menu desplegable con banderas, que sea tipo traductor.
    – Husdady
    el 6 may. 2020 a las 5:42
  • @Husdady yo he probado con mi respuesta colocando enlaces a diferentes páginas web y funciona bien con cada una es decir manda al enlace correspondiente
    – user128299
    el 6 may. 2020 a las 5:55
  • Te pongo como ejemplo mi blog, bueno todas las banderas tienen el mismo enlace, al hacer clic en una de ellas, recarga la pagina pero sigue estando la bandera de inglaterra y no la otra, puedes comprobarlo entrando en mi blog en la parte izquierda esta ese pequeño menu desplegable, ¿me ayudarias solo en eso? Muchas gracias de antemano.
    – Husdady
    el 6 may. 2020 a las 6:54
  • puedes verificar el codigo en el siguiente enlace: nutricionysaludpersonal.blogspot.com/p/blog-page_14.html que la bandera no cambia al recargar la pagina, si le quito enlace funciona normal, esta en la parte izquierda, al hacer clic en la bandera de italia, recarga la pagina pero sige saliendo la de inglaterra, ayudame en eso @BetaM
    – Husdady
    el 6 may. 2020 a las 7:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.