我的目标是在我的iframe(它包含一个日历)的每一边都有一个按钮,它在一个iframe中在日历#1和日历#2之间来回切换。
有什么建议吗?
|arrowLeft| |-----Iframe-------| |arrowRight|
代码在jsfiddle中工作,但当我将所有代码放入我的网站时不起作用。
为什么?
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>
CSS: #right { display:none; }
脚本:
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
既然你说你已经加载了jquery..
可能你的onclick setter (jquery代码)是在文档加载之前运行的(因此文档中没有元素)。
在jsfiddle ('No-Library'纯JS)中,代码(默认情况下)包装在:
window.onload=function(){
// your code here
};
应该已经有效果了。
这就是jsfiddle在左侧选项面板"Frameworks &"下选择(默认)选项"onLoad"时所做的事情。扩展"。
如果你选择'onDomready',那么你的代码将(目前)被包装在一个名为VanillaRunOnDomReady
的函数中,像这样:
var VanillaRunOnDomReady = function() {
// your code here
}
var alreadyrunflag = 0;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><'/script>');
var contentloadtag = document.getElementById("contentloadtag")
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
注意,这个最终仍然结束在window.onload
像'onLoad'选项。
如果你加载JQuery 1.9.1库,事情就会改变(一点)。
选项'onLoad'然后像这样包装你的代码:
$(window).load(function(){
// your code here
});
请注意,这基本上仍然是相同的第一个选项在这个答案,但在JQuery的方式。
如果你选择了选项'onDomready'(而JQuery库是在JSFiddle中加载的),那么你的代码将被包装在:
$(function(){
// your code here
});
正如ErikE在下面的评论中指出的,既然你已经加载并使用了JQuery,你可能还想使用另一种JQuery方式:
$(document).ready(function() {
// your code here
});
最后,正如ErikE在他对你的问题的评论中指出的那样(我忽略了一个严重的问题),id
的意思是独一无二的。而你给这两个段落都赋予了id "toggle"。
相反,您应该给它们class
"toggle",并按类选择元素以分配onclick功能。