Question

我想通过单击按钮来显示和隐藏元素，但它不起作用，它适用于Chrome但不适用于IE8。在页面的开头你只需要看到第一个div而另一个应该被隐藏（这适用于ie8）但是当我点击下一个按钮时它应该隐藏第一个div并且只显示第二个div。我正在使用jQuery 1.7.1。请参阅下面的代码。

我很抱歉这是所有页面代码

<html>

<HEAD>
<style type="text/css" >
form{
    background:#06F;

}
span{
    float:left;
}
#q1{
    display:block;  
}
#q2{
    display:none;
}
#q3{
    display:none;
}
#q4{
    display:none;
}
#q5{
    display:none;
}
input{
    float:left;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<SCRIPT LANGUAGE="JavaScript">


var ans = new Array;
var done = new Array;
var yourAns = new Array;
var explainAnswer = new Array;

var score = 0;
ans[1] = "b";
ans[2] = "b";
ans[3] = "a";
ans[4] = "c";
ans[5] = "b";

explainAnswer[1]="The reason why Answer 1 is Blah Blah Blah";
explainAnswer[2]="The reason why Answer 2 is Blah Blah Blah";
explainAnswer[3]="The reason why Answer 3 is Blah Blah Blah";
explainAnswer[4]="The reason why Answer 4 is Blah Blah Blah";
explainAnswer[5]="The reason why Answer 5 is Blah Blah Blah";

function Engine(question, answer) {
yourAns[question]=answer;
}

function Score(){
var answerText = "How did you do?\n------------------------------------\n";
for(i=1;i<=5;i++){
   answerText=answerText+"\nQuestion :"+i+"\n";
  if(ans[i]!=yourAns[i]){
    answerText=answerText+"\nThe correct answer was "+ans[i]+"\n"+explainAnswer[i]+"\n";
  }
  else{
    answerText=answerText+" \nCorrect! \n";
    score++;
  }
}

answerText=answerText+"\n\nYour total score is : "+score+"\n";

//now score the user
answerText=answerText+"\nComment : ";
if(score<=0){
answerText=answerText+"You need to learn some more";
}
if(score>=1 && score <=2){
answerText=answerText+"bit more practice";
}
if(score>=3 && score <=3){
answerText=answerText+"doing ok";
}
if(score>4){
answerText=answerText+"You are one hot java babe!";
}

alert(answerText);
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("\\omriljedocpd01\OMRILAPPS\OmrilDocs\Omrix Public\All Omrix Public\Training", true);
s.WriteLine(answerText);
s.Close();

}

function toggleDivStart(divId) {
   $("#q1").toggle();
   $("#q2").toggle();
   $("#q3").toggle();
   $("#q4").toggle();
   $("#q5").toggle();
}
function toggleDiv12(divId) {
   $("#q1").toggle();
   $("#q2").toggle();
}
function toggleDiv23(divId) {
   $("#q2").toggle();
   $("#q3").toggle();
}

function toggleDiv34(divId) {
   $("#q3").toggle();
   $("#q4").toggle();
}
function toggleDiv45(divId) {
   $("#q4").toggle();
   $("#q5").toggle();
}
$(function() {
        $( "#radio" ).buttonset();
    });

</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<DIV ALIGN="CENTER">
<h1>Java Quiz</h1>
<b>Test your knowledge of Java!</b>
<hr>
<FORM>

<div id="q1">
<b>1. What is the name of the Java mascot?</b><br>
<input type=radio name="q1" value="a" onClick="Engine(1, this.value)"><span>a) Luke</span><br>
<input type=radio name="q1" value="b" onClick="Engine(1, this.value)"><span>b) Duke</span><br>
<input type=radio name="q1" value="c" onClick="Engine(1, this.value)"><span>c) Nuke</span><br>
<input type=radio name="q1" value="d" onClick="Engine(1, this.value)"><span>d) Sunny</span><p>
  <button id="removeClass"><a href="javascript:toggleDiv12('q1');" >Next</a></button>

</div>
<div id="q2">
<b>2. Where is the best place to get Java software?</b><br>
<input type=radio name="q2" value="a" onClick="Engine(2, this.value)"><span>a) From a can</span><br>
<input type=radio name="q2" value="b" onClick="Engine(2, this.value)"><span>b) From java.sun.com</span><br>
<input type=radio name="q2" value="c" onClick="Engine(2, this.value)"><span>c) You have to buy it from Microsoft</span><br>
<input type=radio name="q2" value="d" onClick="Engine(2, this.value)"><span>d) From your local Star Bucks</span><p>
  <button id="addClass2"><a href="javascript:toggleDiv12('q1');" >Preview</a></button>
  <button id="removeClass2"><a href="javascript:toggleDiv23('q2');" >Next</a></button>
</div>
<div id="q3">
<b>3. A 'for' loop in Java looks like this....</b><br>
<input type=radio name="q3" value="a" onClick="Engine(3, this.value)"><span>a) for(int i=0;i<5;i++){}</span><br>
<input type=radio name="q3" value="b" onClick="Engine(3, this.value)"><span>b) for i=1 to 5 do</span><br>
<input type=radio name="q3" value="c" onClick="Engine(3, this.value)"><span>c) repeat...until(i=5)</span><br>
<input type=radio name="q3" value="d" onClick="Engine(3, this.value)"><span>d) FOR I:=5 DOWNTO 1 DO</span>  <p>
  <button id="addClass3"><a href="javascript:toggleDiv23('q2');" >Preview</a></button>
  <button id="removeClass3"><a href="javascript:toggleDiv34('q3');" >Next</a></button>
</div>
<div id="q4">
<b>4. Which platform can not run Java.</b><br>
<input type=radio name="q4" value="a" onClick="Engine(4, this.value)"><span>Linux</span><br>
<input type=radio name="q4" value="b" onClick="Engine(4, this.value)"><span>Windows NT</span><br>
<input type=radio name="q4" value="c" onClick="Engine(4, this.value)"><span>Commodore 64</span><br>
<input type=radio name="q4" value="d" onClick="Engine(4, this.value)"><span>Apple Mac</span>
<p>
  <button id="addClass4"><a href="javascript:toggleDiv34('q3');" >Preview</a></button>
  <button id="removeClass4"><a href="javascript:toggleDiv45('q4');" >Next</a></button>
</div>

<div id="q5">

<b>5. 'JMF' stands for: </b><br>
<input type=radio name="q5" value="a" onClick="Engine(5, this.value)"><span>A pop group of the 90's who had the hit "Unbelievable"</span><br>
<input type=radio name="q5" value="b" onClick="Engine(5, this.value)"><span>Java Media Framework</span><br>
<input type=radio name="q5" value="c" onClick="Engine(5, this.value)"><span>Java Messaging Framework</span><br>
<input type=radio name="q5" value="d" onClick="Engine(5, this.value)"><span>Java Meditation Forum</span><p>
  <button id="addClass5"><a href="javascript:toggleDiv45('q4');" >Preview</a></button>
    <input type=button onClick="Score()" value="Well... How did I do?">
</div>

</FORM>
</DIV>

<body>
<html>
<p>&nbsp;  </p>
 please help me

我现在编辑代码这是在chrome safari上运行的完整页面代码

Answer 1

您的示例中缺少<script>标记！？

Answer 2

如果这是您正在使用的实际代码，那么您错过了一个开放的<script type="text/javascript">标记。我在您的JS代码之后看到结束</script>，但在您的JavaScript代码之前关闭</style>之后，我看不到一个开始的脚本标记。

Answer 3

你错过了<script>

在</style>

之后

Answer 4

你需要在某个地方调用一个函数，不是吗？

我看到你声明它们，是什么调用/调用它们？

IE8上的jquery函数问题

4 个答案: