javascript - 修改 Jquery 从显示 div 到改变 src

Question

这是我在点击时显示 div 的初始代码。但现在我想将 div 更改为 iframe src。

<iframe src="change this link on click">

任何人都可以启发我如何通过更改 src 而不是选项卡来修改脚本？

<ul class="tabpan">
    <li class="tab" id="tab_1">One</li>
    <li class="tab" id="tab_2">Two</li>
    <li class="tab" id="tab_3">Three</li>
</ul>



<div>
    <div class="tabbox tabbox_1">tab 1 content</div>
    <div class="tabbox tabbox_2">tab 2 content</div>
    <div class="tabbox tabbox_3">tab 3 content</div>
</div>


$(function () {
        $('.tabbox_1').show();
        $('.tab').click(function () {
            var tabid = $(this).attr('id').replace('tab_', '');
            $('.tab').removeClass('active');
            $(this).addClass('active');
            if (!$('.tabbox_' + tabid).is(':visible')) {
                $('.tabbox').hide();
            }
            $('.tabbox_' + tabid).fadeIn();

        });

    });

Answer 1

在此示例中，我已将 URL 作为自定义属性添加到“选项卡”中。您可以在尝试使用 .attr() 更改 iframe 的 URL 时引用这些内容方法:

<ul class="tabpan">
    <li class="tab" data-url="http://jquery.com" id="tab_1">One</li>
    <li class="tab" data-url="http://jqueryui.com" id="tab_2">Two</li>
    <li class="tab" data-url="http://1and1.com" id="tab_3">Three</li>
</ul>

<iframe id="mainFrame" src="http://1and1.com"></iframe>

jQuery 只是提取“选项卡”的 URL 属性并将 iframe 的 src 更改为新的 URL:

$('.tabpan .tab').click(function(){
    src = $(this).attr('data-url');
    $('#mainFrame').attr('src', src);
});

这是一个工作示例:JSFIDDLE希望这对您有所帮助!