Clickable DIV with W3C Validation

by Kushal Jayswal

HTML

<div class="boxes">
    <div class="box">	<a href="http://link1.com" target="_blank">Link with _blank attr</a>

    </div>
    <div class="box">	<a href="http://link2.com" target="_self">Link with _self attr</a>

    </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));