entre Desarrolladores

Question

Buenas, tengo una web en Wordpress en la que utilizo un plugin para coger los álbumes de una página de Facebook y los publica automáticamente en la web con su título y todo.

Lo que quiero hacer es que cuando le pinches al div de cada álbum se vaya a una página específica que yo quiera.

El código de cada álbum es el siguiente:

<div class="imgboxouter" style="position:relative; width:300px; height:293px;">
<div class="imgboxgallery" style="width:300px; height:233px;"></div>
<a href="/?aid=755839414533296" style="width:300px; height:233px;">
<span class="blockspan imgboxblack" style="position: absolute; top: 0; left: 0; width:300px; height:233px; background-image: url(https://graph.facebook.com/755839444533293/picture?type=normal); background-size:150%;"> </span>
</a>
<span class="blockspan titlebelow" style="width:300px; top:238px; height:60px;">
<a href="/?aid=755839414533296" style="width:300px; height:60px;">SEMANA SANTA - LAS ANIMAS GRAN VIA [73]</a>
</span>
</div>

Quiero que al hacer clic en cualquier parte del div tanto en la imagen como en el titulo se vaya a la dirección que quiera yo.

he probado con jQuery $("a").attr("href","www.laweb.com"); pero no funciona..

Gracias de antemano,
Un saludo.

Answer 1

1 Respuestas

Answer 2 · 2015-04-16T19:00:04+0000

1voto

Leonardo-Tadei Puntos227320

Supongo que el código JQuery no te funciona porque solo se aplica al A y lo que querés es aplicárselo al DIV

Si el DIV en cuestión es el interior <div class="imgboxgallery" style="width:300px; height:233px;"></div> bastaría con agregarle un evento click para poder hacer la redirección:

<div class="imgboxgallery" style="width:300px; height:233px;" onclick="window.location ='http://www.laweb.com';" ></div>

A lo sumo puede pasarte que el DIV de 300x233 quede por debajo del título y los A, con lo que no responda al click: bastará en ese caso ponerle un z-index alto con CSS.

Saludos cordiales!

respondido por Leonardo-Tadei (227.320 puntos) Abr 16, 2015

0voto

white comentado Abr 16, 2015

La solucion que te propone @Leonardo es correcta, pero si deseas hacerlo solo con css tambien puedes envolver todo el contenido de tu div en un elemento <a>, en html5 es válido, utiliza para el elemento <a> la propiedad display:block asi permites que el elemento sea del tipo "Block-level".

<div class="imgboxouter" style="position:relative; width:300px; height:293px;">
    <a href="http://ww.laweb.com" style="display:block; width: 100%; height:100%">
       <div> todo el contenido aqui</div>
    </a>
</div>

comentado por white (75.880 puntos) Abr 16, 2015

0voto

Leonardo-Tadei comentado Abr 17, 2015

Hola @white,

yo pensé lo mismo al principio, pero al ver que dentro del DIV ya hay dos A, envonlver todo en otro A haría que se pierda la funcionalidad de los A interiores.

Saludos!

comentado por Leonardo-Tadei (227.320 puntos) Abr 17, 2015

0voto

white comentado Abr 17, 2015

Había entendido que quería que todo el contenido del div sea un enlace, si fuera asi tendria que reemplazar los tags <a> y modificar su css, si no entonces no dije nada :P

por otra parte si desea reemplazar el atributo href de todos los <a> en .imgboxrouter dinamicamente dejo un código:

var change_href = function()
{
    $(this).each(function() {
        $(this).attr('href', 'http://lapagina.com');
    });
};

$(document).ready(function(){

    change_href.apply($('.imgboxrouter a'), []);

    $(document).on('DOMNodeInserted DOMSubtreeModified', '.imgboxrouter', function(e) {
        change_href.apply($(e.target).find('a'), []);
    });
});

comentado por white (75.880 puntos) Abr 17, 2015

Pregunta

Redirección de un div a otra página con jquery

Por favor, accede o regístrate para añadir un comentario.

1 Respuesta

white comentado Abr 16, 2015

Leonardo-Tadei comentado Abr 17, 2015

white comentado Abr 17, 2015

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para responder a esta pregunta.

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta