如何使用html輸入button1顯示一個div1 div2 div3 div4 div5 button2 button3 button4 button5

-2

我有5個div標籤和5個html輸入按鈕，我想用html輸入按鈕單擊一次選擇/顯示一個div。如何使用html輸入button1顯示一個div1 div2 div3 div4 div5 button2 button3 button4 button5

<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>

來源

2017-08-05 Ajit Singh

你到目前爲止嘗試過什麼？請編輯您的問題，並將相關源代碼添加到您的問題以及迄今爲止所做的任何嘗試。謝謝。 – NewToJS

你是否嘗試過任何東西？如果是，請添加html + css（如果有的話）+最重要的是您嘗試的努力。這很好，它沒有奏效。我們將檢查並嘗試糾正它 –

我創建了100個按鈕，但我不知道如何使用這些按鈕做div操作 –

有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>

來源

2017-08-05 13:44:44

一樣。非常感謝您先生，我也在編輯關於這一點，我也發現更多的學習，再次感謝 –

@AjitSingh不客氣。您可以通過選擇我的答案作爲正確答案來關閉此主題。 –

我點擊了標誌，但它顯示了一些錯誤 –

如何使用html輸入button1顯示一個div1 div2 div3 div4 div5 button2 button3 button4 button5

回答

相關問題