通過單擊iframe外部的左側和右側鏈接在2個iframe之間切換

我的目標是在我的iframe（其中包含日曆）的每側上都有一個按鈕，該按鈕在日曆＃1和日曆＃2之間來回切換單個iframe。通過單擊iframe外部的左側和右側鏈接在2個iframe之間切換

有什麼建議嗎？

|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); 
});

來源

2013-03-28 user2220051

的的jsfiddle使用jQuery的。你的網頁上是否包含jQuery？ – chrislondon

在您的網站上，打開調試器控制檯。使用該代碼時是否有任何錯誤或警告？ – Nope

你說你想要一個'iframe'，但你的jsfiddle使用2個內容'div's？ –

你的問題問到使用單一的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-28 15:07:18 chrislondon

嗯，我試過這在我的網站上，但沒有做任何事情，所以我嘗試了jsfiddle，但它沒有在那裏工作，我是否需要定義一些CSS什麼的？ – user2220051

你有沒有鏈接到你的網站不工作，我可以看看？ – chrislondon

www.hardknocks365.com幻燈片下的主頁 – user2220051

<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-28 15:14:47 Dawson

如果你只是切換兩個，沒有理由擔心iframe的索引元素。這是一個簡單的顯示/隱藏情況。不要過度思考。 – Dawson

這沒有爲我工作;/ – user2220051

如何呢？我在FF，Chrome和IE7中測試過它。 – Dawson

通過單擊iframe外部的左側和右側鏈接在2個iframe之間切換

回答

相關問題