javascript - 新窗口中的链接是可选的

Question

假设我希望我的用户可以选择他们单击的链接是在同一个浏览器窗口中打开，还是在使用复选框的新浏览器窗口中打开。该复选框将覆盖元素中目标的使用。我该怎么办？

Answer 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

Answer 2

好吧，从用户体验的角度来看，我想说这不是一个好习惯。因此，不推荐使用 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/

Answer 3

<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>