Показать конкретные параметры с помощью переключателей?

Question

Я знаю, что на этот вопрос был дан ответ несколько раз, и я нашел ответ. Однако код, похоже, не работает на веб-сайте, который я пытаюсь сделать. Это статическая страница и должна работать без Интернета. Я думаю, что мне не хватает определенной функции. пожалуйста помоги!

<form> 
 
<input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input> 
 
<input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input> 
 
<input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input> 
 
<input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input> 
 
<br>  
 
<div id="ar_1" style="display:none;"> 
 
<p>info for option1</p> 
 
</div> 
 
<div id="ar_2" style="display:none;"> 
 
<p>info for option2</p> 
 
</div> 
 
<div id="ar_3" style="display:none;"> 
 
<p>info for option3</p> 
 
</div> 
 
<div id="ar_4" style="display:none;"> 
 
<p>info for option4</p> 
 
</div> 
 
</form> 
 
<script> 
 
$(document).ready(function() {  
 
    $('#id_radio1').click(function() { 
 
     $('#ar_1').show('fast'); 
 
     $('#ar_2').hide('fast');   
 
     $('#ar_3').hide('fast'); 
 
     $('#ar_4').hide('fast'); 
 
    }); 
 
    $('#id_radio2').click(function() { 
 
     $('#ar_1').hide('fast'); 
 
     $('#ar_2').show('fast'); 
 
     $('#ar_3').hide('fast'); 
 
     $('#ar_4').hide('fast'); 
 
    }); 
 
    $('#id_radio3').click(function() { 
 
     $('#ar_1').hide('fast'); 
 
     $('#ar_2').hide('fast'); 
 
     $('#ar_3').show('fast'); 
 
     $('#ar_4').hide('fast'); 
 
    }) 
 
    $('#id_radio4').click(function() { 
 
     $('#ar_1').hide('fast'); 
 
     $('#ar_2').hide('fast'); 
 
     $('#ar_3').hide('fast'); 
 
     $('#ar_4').show('fast'); 
 
    }) 
 
}); 
 
</script>

Answer 1

из вашего кода, вы, кажется, с помощью JQuery библиотеки. Однако у вас нет импорта для этого в любом месте вашего кода. Для вас код, чтобы таким образом работать; вам нужно будет включить локальную копию JQuery (так как у вас нет доступа к Интернету) или просто загрузите ее с размещенных серверов (если у вас есть доступ в Интернет). Quick-Test it Here.

JAVASCRIPT:

<!-- LOCAL JQUERY INCLUDED IN SCRIPT TAG FIRST --> 
<script type="text/javascript" src="assets/js/jquery.js"></script> 

<!-- OR PULLED FROM HOSTED CDN: DELETE THIS OPTION IF YOU HAVE NO INTERNET ACCESS --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 


<script type="text/javascript"> 
    (function($){ 
     $(document).ready(function(evt){ 
      $('#id_radio1').click(function() { 
       $('#ar_1').show('fast'); 
       $('#ar_2').hide('fast'); 
       $('#ar_3').hide('fast'); 
       $('#ar_4').hide('fast'); 
      }); 

      $('#id_radio2').click(function() { 
       $('#ar_1').hide('fast'); 
       $('#ar_2').show('fast'); 
       $('#ar_3').hide('fast'); 
       $('#ar_4').hide('fast'); 
      }); 

      $('#id_radio3').click(function() { 
       $('#ar_1').hide('fast'); 
       $('#ar_2').hide('fast'); 
       $('#ar_3').show('fast'); 
       $('#ar_4').hide('fast'); 
      }); 

      $('#id_radio4').click(function() { 
       $('#ar_1').hide('fast'); 
       $('#ar_2').hide('fast'); 
       $('#ar_3').hide('fast'); 
       $('#ar_4').show('fast'); 
      }) 

     }); 
    })(jQuery); 

</script> 

HTML:

<form> 
     <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1">Option1</input> 
     <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2">Option2</input> 
     <input id="id_radio3" type="radio" name="name_radio1" value="value_radio3">Option3</input> 
     <input id="id_radio4" type="radio" name="name_radio1" value="value_radio4">Option4</input> 
     <br> 
     <div id="ar_1" style="display:none;"> 
      <p>info for option1</p> 
     </div> 
     <div id="ar_2" style="display:none;"> 
      <p>info for option2</p> 
     </div> 
     <div id="ar_3" style="display:none;"> 
      <p>info for option3</p> 
     </div> 
     <div id="ar_4" style="display:none;"> 
      <p>info for option4</p> 
     </div> 
    </form>