javascript - 属性値を使用して新しいタブでリンクを開く

Question

たとえば、以下のコードを参照してください。リンクをクリックするhttp://google.comと、新しいタブで開く必要があります。サイトのデモ リンクのように

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

デモリンクがどのように達成されたのかわかりません.誰か助けてくれますか?ありがとう

Answer 1

次の JavaScript を使用できます (jQuery を使用) :

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

このようにして、リンクは新しいタブまたは新しいウィンドウで開きます (ユーザー設定によって異なります)。

Answer 2

あなたはただ行うことができます：

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

Javascript の代替

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

Answer 3

あなたのデモリンクは次の方法でこれを達成しています：

次のスクリプトを入手する必要があります

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.http : //sorgalla.com/projects/download-zip.php?jcarouselのjquery.jcarousel.js

次に、独自のjsファイルを作成し、これを追加します

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();
});

});

これで、これらのjsファイルをhtmlページにインポートし、名前タグによって目的の機能を実現できます。