javascript - strong - pugjs comment
Envolver el enlace<a> alrededor de<div> (6)
¿Es posible envolver una etiqueta <a> alrededor de <div> s así?
<a href=etc etc>
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
</a>
¿Eclipse me está diciendo que los div están en el lugar equivocado? Si esto no está permitido. ¿Cómo puedo hacer que toda la clase de ''diseño'' se convierta en un enlace?
Esa estructura sería válida en HTML5, ya que en HTML5 los anclajes pueden envolver casi cualquier elemento a excepción de otros anclajes y controles de formulario. La mayoría de los navegadores de hoy en día tienen soporte para esto y analizarán el código de la pregunta como HTML válido. La respuesta a continuación se escribió en 2011 y puede ser útil si admite navegadores antiguos (* tos * Internet Explorer * tos *).
Los navegadores más antiguos sin analizadores HTML5 (como, por ejemplo, Firefox 3.6) todavía se confundirán con eso y posiblemente arruinen la estructura DOM.
Tres opciones para HTML4: usar todos los elementos en línea:
<a href=etc etc>
<span class="layout">
<span class="title">
Video Type
<span class="description">Video description</span>
</span>
</span>
</a>
Luego estilo con display: block
Usa JavaScript y :hover :
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
Y (asumiendo jQuery)
$(''.layout'').click(function(){
// Do something
}):
Y
.layout:hover {
// Hover effect
}
O, por último, utilice la posición absoluta para colocar un ancla con CSS para cubrir todo el conjunto de .layout
<div class="layout">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
<a class="more_link" href="somewhere">More information</a>
</div>
Y CSS:
.layout {
position: relative;
}
.layout .more_link {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-indent: -9999px;
z-index: 1000;
}
Esto no funcionará con versiones anteriores de IE, por supuesto.
Intenté crear una solución personalizada utilizando jQuery , que imitaría el mismo comportamiento que a etiqueta, para el DIV principal.
DEMO: https://jsfiddle.net/kutec/m9vxhcke/
Según el estándar W3C, no puede hacer esto:
<div class="boxes">
<a href="http://link1.com" target="_blank">
<div class="box">
<h3>Link with _blank attr</h3>
</div>
</a>
</div>
Debes seguir esto:
<div class="boxes">
<div class="box">
<h3>
<a href="http://link1.com" target="_blank">Link with _blank attr</a>
</h3>
</div>
</div>
Pero al seguir el código anterior, no se puede hacer clic en el DIV completo :).
La estructura correcta debería ser algo como esto, que también le permite hacer clic sobre el DIV para redirigir el valor href dado :
<div class="boxes" data-href="http://link1.com" data-target="_blank">
<div class="box">
<h3>
<a href="http://link1.com" target="_blank">Link with _blank attr</a>
</h3>
</div>
</div>
Solución simple :
$(function() {
$(''.boxes a'').each(function(){
var aTag = $(this).attr(''href'');
$(this).parent().attr(''data-href'',aTag);
$("[data-href]").click(function() {
window.location.href = $(this).attr("data-href");
return false;
});
})
}(jQuery));
Solución dinámica :
(function ( $ ) {
$.fn.dataURL = function() {
// variables
var el = $(this);
var aTag = el.find(''a'');
var aHref;
var aTarget;
// get & set attributes
aTag.each(function() {
var aHref = $(this).attr(''href'');
$(this).parent().attr(''data-href'',this);
aTarget = $(this).attr(''target'');
$(this).parent().attr(''data-target'',aTarget);
});
// imitation - default attributes'' behavior on "data-" attributes
$(el).delegate(''[data-href]'',''click'', function() {
var loc = window.location.href;
loc = $(this).attr("data-href");
aTarget = $(this).attr(''data-target'');
if(aTarget == "_blank"){
window.open(loc);
} else {
window.location = loc;
}
return false;
});
//removing attributes from selector itself
el.removeAttr(''data-href'');
el.removeAttr(''data-target'');
// css
$(''[data-href]'').css(''cursor'',''pointer'');
};
}( jQuery ));
Llamada final :
<script>
$(''.boxes'').dataURL();
</script>
Espero que esto sea de ayuda :)
La solución de Timothy es correcta ... en lugar de envolver un ancla alrededor de un div ... simplemente le da diseño al elemento de anclaje con la pantalla: bloquee y agregue el tamaño y el ancho del ancla ...
.div_class { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }
<div class=''div_class''><a href="#"></a></div>
Otra solución simple: simplemente agregue un controlador de eventos onclick al div de esta manera:
<div class="layout" onclick="location.href=''somewhere''">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
</div>
Esto funciona muy bien para mí, pero hay una pequeña gotcha. No estoy seguro de qué tan amigable es el motor de búsqueda. Me temo que los rastreadores web de Google podrían no encontrar este enlace, por lo que también tiendo a incluir un enlace A HREF tradicional en algún lugar del bloque como este:
<div class="layout" onclick="location.href=''destination_url''">
<div class="title">
Video Type
<div class="description">Video description</div>
</div>
<a href="destination_url">This is a link</a>
</div>
Si bien la etiqueta <a> no puede contener el elemento <div> , sí puede contener otros elementos en línea como <span> .
Cuando encontré el problema, cambié la etiqueta div con un <span> . Dado que la etiqueta span es un elemento en línea, debe aplicar un display:block al css de su elemento <span> , para que se comporte como el elemento de bloque <div> . Esto debería ser válido xhtml y no requiere ningún javascript.
Aquí hay un ejemplo:
<a href="#">
<span style="display:block">
Some content. Maybe some other span elements, or images.
</span>
</a>
Solo querrá diseñar la etiqueta "a" como display: block;
Eclipse le está diciendo apropiadamente que su HTML no debe ser especificado (ya que una etiqueta div no está permitida en una etiqueta de anclaje).
Pero, como parece que quieres estar visualizando el ancla como una caja grande, entonces simplemente dale el estilo como tal :)