2012-03-07 17 views
0

ボタンをクリックして要素を表示して非表示にしたいのですが、それはクロムでは機能しますがIE8では機能しません。ページの開始時に、最初のdivのみを表示し、他のすべてを非表示にする必要があります(これはie8で動作します)が、次のボタンをクリックすると、最初のdivを表示し、2番目のdivのみを表示する必要があります。 私はjQuery 1.7.1を使用しています。 下記のコードをご覧ください。これは、すべてのページコードIE8でのjquery関数に関する問題

<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 

あるので、申し訳ありませんが私はコードは今、これはあなたの例では不足している<script>タグがあり、クロムサファリに

+0

HTMLコードも投稿できますか? –

+0

この投稿のタイトルを編集してください。私はjQueryがIEで動作することを保証します –

+0

このコードは完全ではありません。それが動作するHTMLはどこですか?どのようにイベントハンドラが '次の'ボタンに表示されたdivを変更するのですか?最初の '

1

これが実際のコードであれば、開封<script type="text/javascript">タグがありません。あなたのJSコードの後ろには</script>のクローズがありますが、JavaScriptコードの前にクローズした</style>の後にはオープンスクリプトタグではありません。

0

あなたはありません、どこかの関数を呼び出す必要が</style>

0

<script>

を欠場?

私はあなたがそれらを宣言するのを見ます、それは何を呼び出す/呼び出すのですか?