Javascript随机显示/隐藏不起作用

时间：2012-08-26 19:06:06

标签： javascript html hide show

我正在使用这个javascript / jquery来隐藏我页面的一部分并显示一个新的部分。它昨天工作，然后我今天来了，它没有工作。我做了一些编辑，比如添加一个“下雪”的javascript，以及一个javascript代码，点击一个按钮就改变了bg颜色，但我删除了我改变的一切，但它仍然不起作用......这是我的整个代码... 

<html><head>

     <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" >
<script type="text/javascript"> <!-- Hides something then shows something. -->
function friedrice(id, id2) {
     $('#' + id).hide(); 
     $('#' + id2).show(); 

}
</script>


<script type="text/javascript"> <!-- Show stuff with fade in -->
    function showStuff(id) {
        document.getElementById(id).style.display = 'block';
object = document.getElementById(id)

$(object).hide();
        $(object).fadeIn(1000);
    }
</script>




<script type="text/javascript"> <!-- Hides hidden stuff on load -->

$(document).ready(function(){ 
    $('#swf').hide(); 
    $('#surprise').hide();
}); 

</script>

<script type="text/javascript"> <!-- Shows stuff -->
function katana(id) {
     $('#' + id).show();

}
</script>


<script type="text/javascript"> <!-- Popup on exit -->
function box()
{
var r=confirm("Content") 
if (r==true)
  {
  window.location.href="russia.html";
  }
else
  {
  window.location.href="china.html";
  }
}
</script>


</head>
    <body onunload="box()";
    <div id="chopsticks"> <!-- This is the "main" content that is displayed before the last checkbox is checked -->
    <OBJECT id="swf" style="z-index:2; position:absolute; top:20%; left:15%;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="90%" HEIGHT="70%" id="rice" ALIGN=""><PARAM NAME=movie VALUE="rice.swf"><PARAM NAME=quality VALUE=low><EMBED src="rice.swf" quality=low bgcolor=#EEEEEE WIDTH="90%" HEIGHT="90%" NAME="rice" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>

<center><h1>Logo Here!</h1><br>
</center>
                    <span id="a1" style="display: block;"><div class="texts" >
                                    <div class="title" >
                    <strong>Step 1</strong><br><br>
                </div>

<div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check1" id="sample_check1" value="1" type="radio" onclick="showStuff('a2')"  />
Done?
    </label></div></span>
<br>
                    <span id="a2" style="display: none;"><div class="texts">

                                    <div class="title" >
                    <strong>Step 2</strong><br><br>
                </div>

<div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check2" id="sample_check2" value="1" type="radio" onclick="showStuff('a3');" />
Done?
    </label>
                </div></span>
<br>
                    <span id="a3" style="display: none;"><div class="texts">

                                    <div class="title" >
                    <strong>Step 3</strong><br><br>
                </div>
                    <div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check3" id="sample_check3" value="1" type="radio" onclick="showStuff('stage');setTimeout(katana, 10000, 'swf');setTimeout(friedrice, 12000, 'chopsticks', 'surprise');" /> <!-- The showStuff function will show an image with a fade in. The katana function will show the swf, then 2 seconds later, the "friedrice" function will remove all of the the content on the page including the swf and show new "surprise" content. -->
Ready?
    </label>
                </div></span>

        <span id="stage" style="display:none;">
            <img src="images/dot.png" style=" position:absolute; left:44%; top:20%;"/>
        </span>


                    <script>
        $('body').hide();
        $('body').fadeIn(1000);
    </script>
</div>
<div id="surprise"> <!-- This is the "hidden" content that is displayed 12 seconds after the checkbox is checked -->
<center>
<p> i jo</p>
<embed src="scare.mp3" autoplay="true" loop="true" height="240" width="100" /></embed>
</div>
</center>
</body></html>

这没有css，因为我认为没有必要。评论的重要部分。请原谅变量，函数等的邋and和名称。我通常不会给我的代码xD。但我不知道发生了什么，我改变了一切，我改变了。希望有人能提供帮助。谢谢！

3 个答案:

答案 0 :(得分：2)

;之后object = document.getElementById(id)失踪了<script type="text/javascript"> <!-- Show stuff with fade in --> function showStuff(id) { document.getElementById(id).style.display = 'block'; object = document.getElementById(id); //this one^ $(object).hide(); $(object).fadeIn(1000); } </script> 。

r=confirm("Content")

var ;在退出部分的弹出窗口中也缺少{{1}}

答案 1 :(得分：0)

尝试进入浏览器设置并清除缓存，这可能有所帮助。

答案 2 :(得分：0)

我已经更改了一些代码，现在我没有收到错误消息：

<html>
<head>
<title>Page title</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" >

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript"> <!-- Hides something then shows something. -->
function friedrice(id, id2) {
     $('#' + id).hide(); 
     $('#' + id2).show(); 
}
</script>

<script type="text/javascript"> <!-- Show stuff with fade in -->
function showStuff(id) {
    document.getElementById(id).style.display = 'block';
    object = document.getElementById(id)

    $(object).hide();
        $(object).fadeIn(1000);
    }
</script>

<script type="text/javascript"> <!-- Hides hidden stuff on load -->
$(document).ready(function(){ 
    $('#swf').hide(); 
    $('#surprise').hide();
}); 
</script>

<script type="text/javascript"> <!-- Shows stuff -->
function katana(id) {
    $('#' + id).show();
}
</script>

<script type="text/javascript"> 
function box(){ 
    var r = window.confirm("Content");
    if(r==true){
        window.location.href="russia.html";
    }
    else{
        window.location.href="china.html";
    }
}
</script>

</head>
    <body onUnload="box">
    <div id="chopsticks"> <!-- This is the "main" content that is displayed before the last checkbox is checked -->
    <OBJECT id="swf" style="z-index:2; position:absolute; top:20%; left:15%;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="90%" HEIGHT="70%" id="rice" ALIGN=""><PARAM NAME=movie VALUE="rice.swf"><PARAM NAME=quality VALUE=low><EMBED src="rice.swf" quality=low bgcolor=#EEEEEE WIDTH="90%" HEIGHT="90%" NAME="rice" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>

<center><h1>Logo Here!</h1><br>
</center>
                    <span id="a1" style="display: block;"><div class="texts" >
                                    <div class="title" >
                    <strong>Step 1</strong><br><br>
                </div>

<div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check1" id="sample_check1" value="1" type="radio" onclick="showStuff('a2')"  />
Done?
    </label></div></span>
<br>
                    <span id="a2" style="display: none;"><div class="texts">

                                    <div class="title" >
                    <strong>Step 2</strong><br><br>
                </div>

<div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check2" id="sample_check2" value="1" type="radio" onclick="showStuff('a3');" />
Done?
    </label>
                </div></span>
<br>
                    <span id="a3" style="display: none;"><div class="texts">

                                    <div class="title" >
                    <strong>Step 3</strong><br><br>
                </div>
                    <div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check3" id="sample_check3" value="1" type="radio" onclick="showStuff('stage');setTimeout(katana, 10000, 'swf');setTimeout(friedrice, 12000, 'chopsticks', 'surprise');" /> 
Ready?
    </label>
                </div></span>

        <span id="stage" style="display:none;">
            <img src="images/dot.png" style=" position:absolute; left:44%; top:20%;"/>
        </span>


                    <script>
        $('body').hide();
        $('body').fadeIn(1000);
    </script>
</div>
<div id="surprise"> <!-- This is the "hidden" content that is displayed 12 seconds after the checkbox is checked -->
<center>
<p> i jo</p>
<embed src="scare.mp3" autoplay="true" loop="true" height="240" width="100"></embed>
</div>
</center>
</body></html>
相关问题
最新问题