1

ユーザーがクリックしたリンクを同じブラウザウィンドウで開くか、チェックボックスを使用して新しいブラウザウィンドウで開くかを選択できるようにしたいとします。チェックボックスは、要素にあるターゲットの使用をオーバーライドします。どうすればいいですか？

4

3 に答える 3

1

jQueryを使えば簡単です。最近の「javascript」タグは、実際には「フレームワークをまだ選択していない」という意味だと感じています。

$('#myCheckbox').on('click', function() {
    $('.myAnchors').attr('target', this.checked ? '_blank' : ''); 
});

デモ： http： //jsfiddle.net/BNrYs/

jQueryなし：

document.getElementById('myCheckbox').addEventListener('click', function() {
    var anchors = document.getElementsByClassName('myAnchors');
    for (var i = 0, max = anchors.length; i < max; i += 1) {
        anchors[i].setAttribute('target', this.checked ? '_blank' : '');
    }
});

デモ： http： //jsfiddle.net/n6EP8/

レガシーIEサポートが必要な場合は、に加えて追加attachEventしますaddEventListener

于 2013-02-23T17:20:47.543 に答える
0 
<a id="link" href="http://www.google.be">test</a>
<input id="target" type="checkbox" onclick="changeTarget();"/>

<script type="text/javascript">
function changeTarget() {
    var checked = document.getElementById('target').checked;
    var target = checked ? '_blank' : '';

    document.getElementById('link').setAttribute('target', target);
}
</script>
于 2013-02-23T17:31:25.920 に答える
0

まあ、UXの観点からは、これは良い習慣ではないと思います。このため、HTML属性target ="_blank"は非推奨になりました。ユーザーは、ブラウザー内でこの機能を既に制御できます。このためのチェックボックスを追加すると、ユーザーが混乱する可能性があります。ただし、本当に必要な場合は、jQueryを使用してそれを行うことができます。

HTML

<ul class="links">
    <li>
        <input type="checkbox" id="checkbox"/>
        <a href="yoursite.com">Your Site</a>
    </li>
    <li>
        <input type="checkbox" id="checkbox"/>
        <a href="someothersite.com">Your Site</a>
    </li>
</ul>

jQuery

$('.links input').change(function(){

    var checkbox = $(this),
        link = $(this).siblings('a');

    if( checkbox.is(':checked') ){
        link.attr('target', '_blank');
    }else{
        link.attr('target', '_self');
    }

});

ここにjsfiddleがあります：http：//jsfiddle.net/RX2cP/

于 2013-02-23T17:40:34.117 に答える