Ouvrir un lien dans un nouvel onglet en utilisant la valeur de l'attribut

Question

Par exemple, voir le code ci-dessous. En cliquant sur le lien, vous devez ouvrir http://google.com dans un nouvel onglet, comme sur le site lien de démonstration

<p class="coupon"><a name="http://google.com">link</a></p>

Je ne sais pas comment le lien démo y est parvenu. Quelqu'un peut-il m'aider à le faire ?

Answer 1

Vous pouvez utiliser le javascript suivant (en utilisant jQuery) :

$('.coupon a').click(function() {
    window.open($(this).attr("name"));
}); 

De cette manière, le lien s'ouvrira dans un nouvel onglet ou une nouvelle fenêtre (selon les préférences de l'utilisateur).

Answer 2

Vous pourriez simplement le faire :

<p class="coupon"><a href="http://google.com" target="_blank">link</a></p>

Alternative au Javascript

$(function(){
  $(".coupon a").click(function(){
    window.open($(this).attr('name'), '_blank');
  });
});

Answer 3

Votre lien de démonstration permet d'atteindre cet objectif de la manière suivante :

Vous devez obtenir les scripts suivants

1. http://code.jquery.com/jquery-1.9.0.min.js

2. http://doc.qt.digia.com/qdoc/config-scripts-superfish-js.html

3. http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/cookie/jquery.cookie.js?r=6125

4. jquery.jcarousel.js de http://sorgalla.com/projects/download-zip.php?jcarousel

Ensuite, créez votre propre fichier js et ajoutez-y ceci

function padd_append_clear() {
    jQuery('.append-clear').append('<div class="clear"></div>');
}

function padd_toggle(classname,value) {
jQuery(classname).focus(function() {
    if (value == jQuery(classname).val()) {
        jQuery(this).val('');
    }
});
jQuery(classname).blur(function() {
    if ('' == jQuery(classname).val()) {
        jQuery(this).val(value);
    }
});
}

function padd_slideshow_init(carousel) {
carousel.clip.hover(function() {
    carousel.stopAuto();
}, function() {
    carousel.startAuto();
});
}

function padd_create_slideshow() {
jQuery('#slideshow > .list').jcarousel({
    auto: 5,
    animation: 1000,
    wrap: 'circular',
    initCallback: padd_slideshow_init
});
}

jQuery(document).ready(function() {
jQuery.noConflict();

jQuery('div#menubar div > ul').superfish({
    autoArrows: false,
    hoverClass: 'hover',
    speed: 500,
    animation: { opacity: 'show', height: 'show' }
});
jQuery('div#menubar div > ul > li:last-child').css({
    'background': 'transparent none',
    'padding-right' : '0'
});

padd_append_clear();
padd_create_slideshow();

jQuery('p.coupon a').click(function() {
    window.open(jQuery(this).attr('name'));
});

jQuery('input#s').val('Find a coupon');
padd_toggle('input#s','Find a coupon');

jQuery('div.search form').click(function () {
    jQuery('input#s').focus();
});

});

Une fois cela fait, vous pouvez importer ces fichiers js dans votre page html et obtenir la fonctionnalité souhaitée par le biais d'une balise de nom.