通过单击带有Javascript的单词/链接来更改div内容

时间：2012-11-16 17:29:40

标签： javascript html hyperlink

我基本上试图让一个单词（第2页）可以点击，并充当显示不同div内容的链接。当他们选择选项2，然后单击下一个按钮时，他们应该能够单击“Page 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 个答案:

答案 0 :(得分：1)

好吧，我认为这就是你想要的，它可能有点大，但我认为它是你问题的完整解决方案。主要是，您有一些页面，用户可以选择，首先查看哪个页面，然后强制用户逐个查看所有下一页直到结束。至少，这就是我在这里所做的。

您可以在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>

答案 1 :(得分：0)

我认为这是你可能正在寻找的东西

function showPage(id)
{
     document.getElementById(id).style.display = 'block';
}

<a href="javascript:showPage('test1');">Choice 1</a>

答案 2 :(得分：0)

好的，所以我在这里添加了后续步骤，可以分成几个类别（这里：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>
相关问题
最新问题