Question

为什么这不起作用？我知道我可以使用目标，但我需要使用jquery。

<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
    </head>
    <body>
        <a href="test1.html" onclick="test()">Test 1</a> <br>
        <a href="test2.html" onclick="test()">Test 2</a>
        <p><iframe id="viewer" src="" frameborder="1" style="width:400px; height:600px"></iframe>
        <script>
            function test() {
                var goto = $('this').attr('href');
                $('#viewer').attr('src', goto);
            }
        </script>
    </body>
</html>

Answer 1

为了实现这一目标，您需要进行一些更改。

标记

<a href="test1.html">Test 1</a>
<a href="test2.html">Test 2</a>

JS

$(document).ready(function(){
    $(a).click(function(event){
         event.preventDefault();
         var goto = $('this').attr('href');
         $('#viewer').attr('src', goto);
    });
});

问题在于，当您单击锚点时，当前窗口的href将更改为锚标记的href属性中指定的相应href。所以你需要阻止默认处理。因此，在函数中添加了 event.preventDefault（）来实现这一目标。

Answer 2

您的代码存在问题，$('this')正在寻找不会退出的HTML元素。

对于即时问题，请使用test(this)

传递元素

<a href="test1.html" onclick="test(this)">Test 1</a>

脚本

function test(elem) {
    $('#viewer').attr('src', elem.href);
}

正在使用jquery绑定事件

//Document ready handler which executes when DOM is complety loaded
$(function(){

    //Bind event
    $('a').on('click', function(e){

        //Cancel default action
        e.preventDefault();

        //Here this refers to element which invoked the event handler
        var goto = $(this).attr('href'); //this.href can also be used

        $('#viewer').attr('src', goto);
    }); 
});

HTML 的

<a href="test1.html">Test 1</a>
<a href="test2.html">Test 2</a>

使用jquery无法正常工作的目标iframe

2 个答案: