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

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

Answer 3

嗯，从UX的角度来看，我认为这不是一个好习惯。 HTML属性target =＆＃34; _blank＆＃34;因此而被弃用。用户已在浏览器中控制此功能。为此添加复选框可能会让用户感到困惑。但是，如果你真的想要用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');
    }

});

继承人：http://jsfiddle.net/RX2cP/

新窗口中的链接是可选的

3 个答案: