entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

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

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.

1 Respuesta

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!

0voto

white comentado

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>

0voto

Leonardo-Tadei comentado

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!

0voto

white comentado

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'), []);
    });
});

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

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta