我基本上試圖讓一個單詞(第2頁)可點擊並充當鏈接以顯示不同的div內容。當他們選擇選項2時,然後點擊下一個按鈕,他們應該能夠點擊「Page 2」測試並導致顯示id =「test1」(選擇1,第1頁)內容。我已經嘗試了一些變量,但一直未能得到任何工作。我能做的最好的事情就是讓你回到選擇的選項,但我想消除任何用戶錯誤,並直接進入他們應該做的選擇的第一頁。
任何幫助將不勝感激。對不起,JQuery不是一個選項。通過點擊任何文字/鏈接來更改div的內容使用Javascript
<!DOCTYPE html>
<html>
<center>
<head>
<title>Test2</title>
<script>
function formReset()
{
document.getElementById("home").innerHTML ="";
document.getElementById("main").style.display = 'block';
document.getElementById("1").checked = false;
document.getElementById("2").checked = false;
}
function nextPage()
{
if (document.getElementById("1").checked == true){
document.getElementById("home").innerHTML = document.getElementById("test1").innerHTML;
document.getElementById("main").style.display = 'none';
}
else
if (document.getElementById("2").checked == true){
document.getElementById("home").innerHTML = document.getElementById("test2").innerHTML;
document.getElementById("main").style.display = 'none';
}
return true;
}
function otherPage()
{
switch (document.getElementById('home').innerHTML)
{
case document.getElementById("test2").innerHTML:
(document.getElementById("home").innerHTML = document.getElementById("choice2_page2").innerHTML)
break;
}
}
</script>
</head>
<body>
<h1>This is a test of the radio buttons</h1>
<br />
<div>
<form>
<div id="home"></div>
<div id="main">
<input type="radio" name="grp1" id="1">1<br>
<input type="radio" name="grp1" id="2">2<br>
<br />
<input type="button" name="button" value="Next" onClick="nextPage()">
</div>
</form>
</div>
<div name="test1" id="test1" style="display:none"><!-- Display this content -->
<h2>Choice 1<br>Page 1</h2>
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test2" id="test2" style="display:none">
<h2>Choice 2<br>Page 1</h2>
<input type="button" value="Next" id="page_choice" onclick="otherPage()">
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="choice2_page2" id="choice2_page2" style="display:none">
<h2>You should have chose<br><b>Choice 1</b></h2><!-- When clicked, this "Choice 1" should display the contents of id="test1" (Choice 1, Page 1)-->
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
</body>
</center>
</html>
它會顯示我正在看的內容,但舊內容仍然顯示。儘管如此,我可以與其合作,非常感謝。 –
我加了document.getElementById(「home」)。innerHTML =「」;到該功能並清除舊內容。當我刷新並返回主頁面時,顯示兩個內容。我會繼續努力。 –
添加了document.getElementById(「test1」)。innerHTML =「」;到功能,它是完美的。 –