通過單擊帶有Javascript的單詞/鏈接來更改div內容
[英]Change div content by clicking a word/link with Javascript
問題描述
我基本上是想讓一個單詞（第2頁）可點擊並充當顯示不同div內容的鏈接。 當他們選擇選項2時，然后單擊下一步按鈕，他們應該能夠單擊“第2頁”測試，並使其顯示id =“ test1”（選擇1，第1頁）內容。 我嘗試了一些變量，但沒有任何作用。 我能做的最好的就是讓您回到選擇選項，但是我想消除任何用戶錯誤，直接進入他們應該選擇的第一頁。
任何幫助將不勝感激。 抱歉，不能選擇JQuery。
<!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>
3 個解決方案
解決方案1
1 2012-11-16 19:28:01
好的，我想這就是您想要的，可能會有點大，但是我想這是您問題的完整解決方案。 通常，您有一些頁面，用戶可以選擇首先查看哪個頁面，但是隨后您迫使用戶逐個查看所有下一頁，直到最后。 至少，這就是我在這里所做的。
您可以在textContent數組中添加任意數量的文本（頁面），只需檢查您是否具有相應數量的單選按鈕即可。
<html>
<head></head>
<body>
<div id="mainDiv" style="text-align: center">
<div id="textDiv"></div>
<div id="radioDiv">
<input type="radio" id="rad1" name="radGrp"><label for="rad1">1</label><br>
<input type="radio" id="rad2" name="radGrp"><label for="rad2">2</label><br>
<input type="radio" id="rad3" name="radGrp"><label for="rad3">3</label><br>
<input type="radio" id="rad4" name="radGrp"><label for="rad4">4</label><br>
<input type="radio" id="rad5" name="radGrp"><label for="rad5">5</label><br>
</div>
<div id="btnDiv">
<input type="button" id="btn" value="show"><br>
</div>
</div>
<script type="text/javascript">
/*here we push the onclick attribute in js, so the code is unobtrusive*/
document.getElementById("btn").onclick = function(){formContent();};
var radios = document.getElementsByName("radGrp"),
idCurrent = 0,
firstRun = true,
textContent = [
"<h3>option 1</h3><p>here is the text of option 1 :(</p>",
"<h3>option 2</h3><p>here is the text of option 2 :)</p>",
"<h3>option 3</h3><p>here is the text of option 3!</p>",
"<h3>option 4</h3><p>here is the text of option 4 :-D</p>",
"<h3>option 5</h3><p>here is the text of option 5 :-P</p>"
];
function hideDivs(){
document.getElementById("textDiv").style.display = "block";
document.getElementById("radioDiv").style.display = "none";
document.getElementById("btn").value = "next";
firstRun = false;
}
function restoreDivs(){
idCurrent=0;
document.getElementById("textDiv").style.display = "none";
document.getElementById("radioDiv").style.display = "block";
document.getElementById("btn").value = "show";
firstRun = true;
}
/*function to find the id of a checked radio from the group*/
function findChecked(){
for (var i=0; i<radios.length; i++) {
if (radios[i].checked) idCurrent = radios[i].id;
}
/*since the id is in text, we cut the first part and leave*/
/*just the number*/
idCurrent = parseInt(idCurrent.slice(3));
}
/*actual function*/
function formContent(){
if (idCurrent == 0) findChecked();
if (firstRun) {
hideDivs();
}
/*pushing into textDiv values from textContent array, which*/
/*is your pages content*/
document.getElementById("textDiv").innerHTML = textContent[idCurrent - 1];
if (idCurrent<radios.length) {
idCurrent++;
/*changing the button value if the current piece of text*/
/*is the last one*/
} else if (idCurrent == radios.length) {
idCurrent++;
document.getElementById("btn").value = "finish!";
/*if there is no more text, we just restore everything to*/
/*the initial state*/
} else {
restoreDivs();
idCurrent = 0;
}
}
</script>
</body>
</html>
解決方案2
0 已采納 2012-11-16 18:47:44
我想這就是你想要的
function showPage(id)
{
document.getElementById(id).style.display = 'block';
}
<a href="javascript:showPage('test1');">Choice 1</a>
解決方案3
0 2012-11-16 20:29:35
好的，所以我在這里添加了后續步驟，這些步驟可以分為幾個類別（此處為3），如果您從某個類別中選擇一個步驟，則只需閱讀一下即可。 希望能有所幫助;）
<html>
<head></head>
<body>
<div id="mainDiv" style="text-align: center">
<div id="textDiv"></div>
<div id="radioDiv">
<input type="radio" id="rad1" name="radGrp"><label for="rad1">1. reinstall os (step 1)</label><br>
<input type="radio" id="rad2" name="radGrp"><label for="rad2">2. reinstall os (step 2)</label><br>
<input type="radio" id="rad3" name="radGrp"><label for="rad3">3. reinstall os (step 3)</label><br>
<input type="radio" id="rad4" name="radGrp"><label for="rad4">4. reinstall os (step 4)</label><br>
<input type="radio" id="rad5" name="radGrp"><label for="rad5">5. watering a plant (step 1)</label><br>
<input type="radio" id="rad6" name="radGrp"><label for="rad6">6. watering a plant (step 2)</label><br>
<input type="radio" id="rad7" name="radGrp"><label for="rad7">7. reading alphabet (step 1)</label><br>
<input type="radio" id="rad8" name="radGrp"><label for="rad8">8. reading alphabet (step 2)</label><br>
<input type="radio" id="rad9" name="radGrp"><label for="rad9">9. reading alphabet (step 3)</label><br>
<input type="radio" id="rad10" name="radGrp"><label for="rad10">10. reading alphabet (step 4)</label><br>
</div>
<div id="btnDiv">
<input type="button" id="btn" value="show"><br>
</div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){formContent();};
var radios = document.getElementsByName("radGrp"),
idCurrent = 0,
planCurrent,
firstRun = true,
instructions = [
[0,1,2,3], /* your instruction plans */
[4,5], /* this is the second plan (with index = 1) and it has steps 5 and 6 */
[6,7,8,9] /* this is the third plan (with index = 2) and it has steps 7, 9, 9 and 10 */
],
textContent = [
"<h3>reinstall os (step 1)</h3><p>download .iso from torrent</p>",
"<h3>reinstall os (step 2)</h3><p>burn it to a cd of usb</p>",
"<h3>reinstall os (step 3)</h3><p>change bios settings</p>",
"<h3>reinstall os (step 4)</h3><p>boot, install, enjoy</p>",
"<h3>watering a plant (step 1)</h3><p>pour some water into a flask</p>",
"<h3>watering a plant (step 2)</h3><p>water the plant, enjoy</p>",
"<h3>reading alphabet (step 1)</h3><p>read letter \"a\"</p>",
"<h3>reading alphabet (step 2)</h3><p>read letter \"b\"</p>",
"<h3>reading alphabet (step 3)</h3><p>read letter \"c\"</p>",
"<h3>reading alphabet (step 4)</h3><p>read all the other letters, enjoy</p>"
];
function hideDivs(){
document.getElementById("textDiv").style.display = "block";
document.getElementById("radioDiv").style.display = "none";
document.getElementById("btn").value = "next";
firstRun = false;
}
function restoreDivs(){
document.getElementById("textDiv").style.display = "none";
document.getElementById("radioDiv").style.display = "block";
document.getElementById("btn").value = "show";
idCurrent=0;
firstRun = true;
}
/*function to find the id of a checked radio from the group*/
function findChecked(){
for (var i=0; i<radios.length; i++) {
if (radios[i].checked) idCurrent = radios[i].id;
}
idCurrent = parseInt(idCurrent.slice(3))-1;
}
/*find which plan checked id belongs*/
function findPlan(){
for (var m=0;m<instructions.length;m++){
for (var n=0;n<instructions[m].length;n++){
if (instructions[m][n] == idCurrent) planCurrent = m;
}
}
}
/*actual function*/
function formContent(){
if (firstRun) {
findChecked();
findPlan();
hideDivs();
}
/*pushing into textDiv values from textContent array, which is your pages content*/
document.getElementById("textDiv").innerHTML = textContent[idCurrent];
/*check that we read just the current plan*/
if (idCurrent < instructions[planCurrent][instructions[planCurrent].length - 1]){
idCurrent++;
} else if (idCurrent == instructions[planCurrent][instructions[planCurrent].length - 1]) {
idCurrent++;
document.getElementById("btn").value = "finish!";
} else {
restoreDivs();
}
}
</script>
</body>
</html>
單擊鏈接以更改div文本，但在單擊另一個鏈接時需要原始內容-js
[英]link clicked to change div text but needs original content back on clicking another link - js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.