0

私の目標は、iframe (カレンダーを含む) の両側に、1 つの iframe でカレンダー #1 とカレンダー #2 を切り替えるボタンを配置することです。

助言がありますか？

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

コードは機能し[http://jsfiddle.net/PauWy/447/][1]ますが、すべてのコードを Web サイトに配置すると機能しません。

何故ですか？

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 に答える