Question

我的目标是在我的iframe（包含日历）的每一侧都有一个按钮，该按钮可在单个iframe中的日历＃1和日历＃2之间来回切换。

有什么建议吗？

|arrowLeft| |-----Iframe-------| |arrowRight|

代码在[http://jsfiddle.net/PauWy/447/][1]中有效但在我将所有代码放入我的网站时无效。

为什么？

HTML:

<p id="toggle">
<span> Left </span>
<span> </span>
</p>

<div id="left"> <iframe>LEFT CONTENT</iframe> L</div>
<div id="right"> <iframe>RIGHT CONTENT</iframe>R </div>

<p id="toggle">
<span></span>
<span> Right </span></p>

Script:

#right { display:none; }

CSS：

$('#toggle > span').click(function() {
var ix = $(this).index();

$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});

Answer 1

您的问题要求使用单个iFrame。所以这就是我如何使用jQuery做到的：

HTML：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<p id="toggle">
    <span data-src="/calendar1.html"> Left </span>
    <span data-src="/calendar2.html"> Right </span>
</p>

<iframe id="iframe" src="/calendar1.html"></iframe>

使用Javascript：

$(function() {
    var iframe = $('#iframe');

    $('#toggle').delegate('span[data-src]', 'click', function() {
        iframe.attr('src', $(this).attr('data-src'));            
    });
});

Answer 2

<html>
<head>
    <style type="text/css">
        #theFrames iframe { display:none }
        #theFrames iframe:first-child { display:block }
    </style>
</head>
<body>
<p class="toggle"><span>Left</span></p>
<div id="theFrames">
    <iframe src='http://jsfiddle.net'></iframe>
    <iframe src='http://doc.jsfiddle.net'></iframe>
</div>
<p class="toggle"><span>Right</span></p>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    var a=0;
    $('.toggle span').each(function() {
        $(this).attr('rel',a++);
    });
    $('.toggle span').click(function() {
        a = $(this).attr('rel');
        $('#theFrames iframe').hide();
        $('#theFrames iframe:eq('+a+')').show();
    })
</script>
</body>
</html>

通过点击iframe外部的左右链接在2个iframe之间切换

2 个答案: