Question

以下脚本将向您展示一个jquery手风琴选项卡，其中包含iframe和每个h3旁边的链接。我想点击h3链接，链接将网址加载到iframe中？就这么简单

我花了很多时间来解决这个问题，但我做不到。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Rig Counts</title>
<script src="../java/jquery-1.9.1.js" type="text/jscript"></script>
<script src="../java/jquery-ui.js" type="text/jscript"></script>
<script type="text/jscript">  
$(function() {    
$( "#accordion" ).accordion({     
collapsible: true,
active : false,
});  
});
</script>
</head>

<body>

<div id="accordion" style="width: 441px; height: 1565px;">

    <h3><a href="http://www.example.com" target="I1">test1</a></h3>
    <div style="width: 400px; height: 500px">
        <iframe id="I1" border="0" frameborder="0" name="I1" scrolling="auto" style="width: 100%; height: 100%">
        </iframe>
    </div>

    <h3><a href="http://www.example.com" target="I2">test2</a></h3>
    <div>
        <div style="width: 238px; height: 270px;">
            <iframe id="I2" border="0" frameborder="0" name="I2" scrolling="no" src="" style="width: 100%; height: 100%">
            </iframe>
        </div>
    </div>

</div>

</body>

</html>

jsfiddle example

Answer 1

我不确定您为什么要使用链接添加src，就像您知道要放入href的网址一样，您可以直接在iframe的src中使用它。但无论如何，这里是使用jQuery解决问题的答案：

$( "#accordion" ).accordion({     
    collapsible: true,
    active : false,
    beforeActivate: function( event, ui ) {
        $(ui.newPanel).find('iframe').attr('src', $(ui.newHeader).find('a:eq(0)').attr('href'));
    }
});

Example

More information about the beforeActivate event

点击手风琴标签进入iframe时加载网址链接

1 个答案: