0

私は基本的に、単語 (ページ 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>
4

3 に答える 3

1

さて、これはあなたが望むものだと思います、それは少し大きいかもしれませんが、それはあなたの問題の完全な解決策だと思います。主に、いくつかのページがあり、ユーザーはどのページを最初に表示するかを選択できますが、その後、ユーザーに次のすべてのページを最後まで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>
于 2012-11-16T19:28:01.607 に答える
0

これはあなたが探しているものだと思います

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

<a href="javascript:showPage('test1');">Choice 1</a>
于 2012-11-16T18:47:44.897 に答える
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>
于 2012-11-16T20:29:35.843 に答える