Clickable DIV with W3C Validation
HTML
<div class="boxes">
<div class="box"> <a href="http://link1.com" target="_blank">Link with _blank attr</a>
</div>
<div class="box">
</div>
<div class="box"> <a href="http://link3.com">Link with no attr</a>
</div>
</div>
CSS
div div {
background: #eee;
padding: 10px;
margin-bottom: 2px;
}
JavaScript
/*
* jQuery dataURL Plugin
*
* Copyright (c) 2015 Kushal Jayswal <[email protected]>
* Dual licensed under the MIT or GPL Version 2 licenses or later.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*
*/
(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');
};
// final call
$('.boxes').dataURL();
}(jQuery));