0

我的目标是在 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 );
});
4

2 回答 2

0

您的问题要求使用单个 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'));            
    });
});
于 2013-03-28T15:07:18.477 回答
0 
<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>
于 2013-03-28T15:14:47.503 回答