我之前制作了这个代码,它基本上是一个iframe模块,它在iframe中显示了5个不同的页面,每次选择不同的选项时都会改变iframe src。 这段代码曾经工作过,我多次使用它。
但是现在,我在几个月内没有使用过这段代码,现在我不得不再次使用它,但是现在它没有用了,我没有改变任何东西......
基本上现在点击无线电时没有任何反应...... 谁能帮我?为什么它不再起作用?
代码:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("document loaded");
function scrollTo(x,y){}
function ignoreerror()
{
return true
}
window.onerror=ignoreerror();
$('#iframe1').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://www.minecraft-index.com/22924-turismopvp').fadeIn(600);
$('#span1').css('color','#ff0000');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 1;
});
$('#iframe2').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-server-list.com/server/225930 /vote/').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#ff0000');
$('#span3').css('color','#080808');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 2;
});
$('#iframe3').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'https://minestatus.net/111321-turismopvp').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#ff0000');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 3;
});
$('#iframe4').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-mp.com/servers42977').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#ff0000');
$('#span5').css('color','#080808');
iframeState = 4;
});
$('#iframe5').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraftservers.org/server/134459').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#ff0000');
$('#span5').css('color','#080808');
iframeState = 5;
});
});
var iframeState = 1;
$(document).on('click','#back',function() {
if (iframeState >= 2 && iframeState <= 5) {
iframeState = iframeState - 1;
} else {
iframeState = 5;
}
iframeSelector();
});
$(document).on('click','#next',function() {
if (iframeState >= 1 && iframeState <= 4) {
iframeState = iframeState + 1;
} else {
iframeState = 1;
}
iframeSelector();
});
function iframeOne(){
$('#iframebox').fadeOut(600).attr('src', 'http://www.minecraft-index.com/22924-turismopvp').fadeIn(600);
$('#span1').css('color','#ff0000');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 1;
};
function iframeTwo(){
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-server-list.com/server/225930/vote/').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#ff0000');
$('#span3').css('color','#080808');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 2;
};
function iframeThree(){
$('#iframebox').fadeOut(600).attr('src', 'https://minestatus.net/111321-turismopvp').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#ff0000');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 3;
};
function iframeFour(){
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-mp.com/server-s42977').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#ff0000');
$('#span5').css('color','#080808');
iframeState = 4;
};
function iframeFive(){
$('#iframebox').fadeOut(600).attr('src', 'http://minecraftservers.org/server/134459').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#ff0000');
$('#span5').css('color','#080808');
iframeState = 5;
};
function iframeSelector(){
switch(iframeState)
{
case 1:
iframeOne();
break;
case 2:
iframeTwo();
break;
case 3:
iframeThree();
break;
case 4:
iframeFour();
break;
case 5:
iframeFive();
break;
default:
iframeState=1;
iframeOne();
}
}
})
</script>
<div id="everything" style="background-color: rgba(0, 0, 0, 0.6);border:1px solid #000000;border-radius:10px;padding:10px;">
<div id="selectbox" align="center">
<input id="iframe1" name="options" value="website1" type="radio">
<label for="iframe1"><span id="span1">MC Servers</span></label>
<input id="iframe2" name="options" value="website2" type="radio">
<label for="iframe2"><span id="span2">MineStatus</span></label>
<input id="iframe3" name="options" value="website3" type="radio">
<label for="iframe3"><span id="span3">MC Server List</span></label>
<input id="iframe4" name="options" value="website4" type="radio">
<label for="iframe4"><span id="span4">TopG</span></label>
<input id="iframe5" name="options" value="website5" type="radio">
<label for="iframe5"><span id="span5">Planet Minecraft</span></label>
</div>
<div id="buttons" align="center">
<img id="back" src="http://files.enjin.com/444592/sd/back.png" alt="back">
<img id="next" src="http://files.enjin.com/444592/sd/next.png" alt="next">
</div>
<div id="iframes" align="center">
<iframe id="iframebox" seamless="" src="http://minecraft-mp.com/server-s42977" height="600px;" width="100%">
</iframe>
</div>
</div>
<style>
#selectbox{
border:2px solid #080808;
border-radius:25px;
background:#dddddd;
overflow:hidden;
height:40px;
padding-top:5px;
opacity:0.95;
}
#span1, #span2, #span3, #span4, #span5{
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
padding-top: 6px;
margin-right: 30px;
font-size: 18px;
color:#050505;
font-weight:bold;
transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out; /* FF 4 */
-webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
-o-transition: color 1s ease-in-out; /* Opera */
}
#span1{
color:#ff0000;
}
input[type=radio]{
display: none;
}
.radio label:before {
border-radius: 8px;
}
#iframes{
border:0px solid #080808;
border-radius:15px;
padding:10px;
}
#iframebox{
border:0px solid #080808;
border-radius:15px;
margin-left:0px;
transition: margin 1s ease-in-out;
-moz-transition: margin 1s ease-in-out; /* FF 4 */
-webkit-transition: margin 1s ease-in-out; /* Safari & Chrome */
-o-transition: margin 1s ease-in-out; /* Opera */
}
#back{
cursor: pointer;
margin-top:10px;
margin-right:5px;
width:159;
height:60;
opacity:1;
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.6s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.6s ease-in-out; /* Opera */
}
#back:hover{
width:159;
height:60;
opacity:0.75;
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.6s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.6s ease-in-out; /* Opera */
}
#back:active{
width:159;
height:60;
opacity:1;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.2s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.2s ease-in-out; /* Opera */
}
#next{
cursor: pointer;
margin-top:10px;
margin-left:5px;
width:159;
height:60;
opacity:1;
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.6s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.6s ease-in-out; /* Opera */
}
#next:hover{
width:159;
height:60;
opacity:0.75;
transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.6s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.6s ease-in-out; /* Opera */
}
#next:active{
width:159;
height:60;
opacity:1;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out; /* FF 4 */
-webkit-transition: opacity 0.2s ease-in-out; /* Safari & Chrome */
-o-transition: opacity 0.2s ease-in-out; /* Opera */
}
</style>
答案 0 :(得分:2)
这应该解决我收集的问题:
$(document).ready(function(){
console.log("document loaded");
function scrollTo(x,y){}
function ignoreerror()
{
return true
}
window.onerror=ignoreerror();
$('#iframe1').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://www.minecraft-index.com/22924-turismopvp').fadeIn(600);
$('#span1').css('color','#ff0000');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 1;
});
$('#iframe2').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-server-list.com/server/225930 /vote/').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#ff0000');
$('#span3').css('color','#080808');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 2;
});
$('#iframe3').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'https://minestatus.net/111321-turismopvp').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#ff0000');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 3;
});
$('#iframe4').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-mp.com/servers42977').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#ff0000');
$('#span5').css('color','#080808');
iframeState = 4;
});
$('#iframe5').click(function() {
$('#iframebox').fadeOut(600).attr('src', 'http://minecraftservers.org/server/134459').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#ff0000');
$('#span5').css('color','#080808');
iframeState = 5;
});
var iframeState = 1;
$(document).on('click','#back',function() {
if (iframeState >= 2 && iframeState <= 5) {
iframeState = iframeState - 1;
} else {
iframeState = 5;
}
iframeSelector();
});
$(document).on('click','#next',function() {
if (iframeState >= 1 && iframeState <= 4) {
iframeState = iframeState + 1;
} else {
iframeState = 1;
}
iframeSelector();
});
function iframeOne(){
$('#iframebox').fadeOut(600).attr('src', 'http://www.minecraft-index.com/22924-turismopvp').fadeIn(600);
$('#span1').css('color','#ff0000');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 1;
};
function iframeTwo(){
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-server-list.com/server/225930/vote/').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#ff0000');
$('#span3').css('color','#080808');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 2;
};
function iframeThree(){
$('#iframebox').fadeOut(600).attr('src', 'https://minestatus.net/111321-turismopvp').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#ff0000');
$('#span4').css('color','#080808');
$('#span5').css('color','#080808');
iframeState = 3;
};
function iframeFour(){
$('#iframebox').fadeOut(600).attr('src', 'http://minecraft-mp.com/server-s42977').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#ff0000');
$('#span5').css('color','#080808');
iframeState = 4;
};
function iframeFive(){
$('#iframebox').fadeOut(600).attr('src', 'http://minecraftservers.org/server/134459').fadeIn(600);
$('#span1').css('color','#080808');
$('#span2').css('color','#080808');
$('#span3').css('color','#080808');
$('#span4').css('color','#ff0000');
$('#span5').css('color','#080808');
iframeState = 5;
};
function iframeSelector(){
switch(iframeState)
{
case 1:
iframeOne();
break;
case 2:
iframeTwo();
break;
case 3:
iframeThree();
break;
case 4:
iframeFour();
break;
case 5:
iframeFive();
break;
default:
iframeState=1;
iframeOne();
}
}
});
那里有一些额外的关闭括号。
以下是页面工作的小提琴:http://jsfiddle.net/sr2gw/