Question

我还有5个div标签和5个html输入按钮，我想使用html输入按钮点击一次选择/显示一个div。

<script>
      $(function () {
          // Store our questions in a variable
          var $questions = $('.question');

          // Show the first question
          $questions.first().show();

          // When clicking the <button> in ny of the questions...
          $questions.find('input').on('click', function () {
              // ...store the currently visible question, then...
              var $visibleQuestion = $questions.filter(':visible');

              // ...if there's a next question....
              var $nextQuestion = $visibleQuestion.next('.question');
              console.log($nextQuestion);
              if ($nextQuestion.length === 1) {
                  // ...hide the visible question....
                  $visibleQuestion.hide();
                  // ..and show the next.
                  $nextQuestion.show();
              }
                  // If you want, you can check for quiz completition in this else section
              else {
                  // Quiz finished
                  alert('You finished the quiz!');
              }
          });
          // Optionally, change the text of the last question's button
          $questions.last().find('input').text('Finish Quiz');
      });
    </script>

<script type="text/javascript">

                                        var x, y;
                                        var i = 0;
                                        var j = 0;
                                        for (x = 0; x < 20; x++) {
                                            for (y = 0; y < 5; y = y + 1) {
                                                document.write('<input id="button' + (i + 1) + '" class="btnClass" type="button"  value="' + (i + 1) + '" style="width:30px; height:25px;text-align:left;" />');

                                                i++;
                                                document.write('&nbsp &nbsp');
                                                if (i % 5 == 0) {
                                                    document.write('<br /> <br />');
                                                }
                                            }


                                        }
                                    </script>

Answer 1

最初隐藏了5个div，并在单击按钮时显示。

$(document).ready(function()
            {
                $("#btn2").click(function()
                {
                    $("#two").removeClass("hidden");
                });
            });
            $(document).ready(function()
            {
                $("#btn3").click(function()
                {
                    $("#three").removeClass("hidden");
                });
            });
            $(document).ready(function()
            {
                $("#btn4").click(function()
                {
                    $("#four").removeClass("hidden");
                });
            });
            $(document).ready(function()
            {
                $("#btn5").click(function()
                {
                    $("#five").removeClass("hidden");
                });
            });


 <body>
 <style type="text/css">
    .hidden
    {
        visibility:hidden;
    }
 </style>
                <button id="btn1">DIV 1</button>
                <button id="btn2">DIV 2</button>
                <button id="btn3">DIV 3</button>
                <button id="btn4">DIV 4</button>
                <button id="btn5">DIV 5</button>


        <div id='one' class="hidden">1 Lorem </div>
        <div id="two" class="hidden">2 lorem</div>
        <div id="three" class="hidden">3 lorem </div>
        <div id="four" class="hidden">4 lorem </div>
        <div id="five" class="hidden">5 lorem </div>

如何使用html输入button1 button2 button3 button4 button5显示div1 div2 div3 div4 div5

1 个答案: