Подскажите пожалуйста. Есть 3-и radio button, 3-и формы и соответственно обработчики этих radio button. Первоначально все формы скрыты, мне необходимо по нажатию на первый radio button показать первую форму (2 и 3 формы не видны), по нажатию на второй - скрыть первую и показать вторую (1, 3-я форма не видна), по нажатию на 3 radio button скрыть 2 форму (1, 2 формы не видны). По нажатию на radio button я вызываю обработкич событий javascript - onclick="show(1)". Для скрытия и отображения форм использую display:none и display:block соответственно. Скрипт вроде как работает, но работает только на Chrome и на Safari, на IE (пробывал на 8 версии) и на FireFox (пробывал на 5 версии) - оно не работает. Проверял тег input и событие onclick - пишут что поддерживается всеми браузерами на 100%. Помогите пожалуйста разобраться, сидел-сидел - ничего не предумал, решил обратиться за помощью к профессионалам. Заранее благодарен! HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 //EN" "http://www.w3.org/TR/xhtml4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery.js" ></script> <script src="pack.js"></script> <style> #form1, #form2, #form3, #form4 {display:none;} </style> <!-- ------------------------------------------------- --> </head> <body> <input type="radio" name="radio" onclick="show(1)"> 1 <input type="radio" name="radio" onclick="show(2)"> 2 <input type="radio" name="radio" onclick="show(3)"> 3 <!-- ------------------------------------------------- --> <form id="form1" action="send_email.php" method="post" enctype="multipart/form-data"> <p class="type1"> <select id="sel" size="1" name="width1"> <option value="17">17</option> <option value="20">20</option> <option value="26">26</option> </select> Ширина </p> </form> <!-- ---------------- - --- - - - - - - - - ----------------- --> <form id="form2" action="send_email.php" method="post" enctype="multipart/form-data"> <p class="type2"> <select id="heigh_2" size="1" name="height_2"> <option value="35">35</option> <option value="40">40</option> <option value="45">45</option> </select> Высота </p> </form> <!-- ---------------- --- --- -- - - - - - - --------------- --> <form id="form3" action="send_email.php" method="post" enctype="multipart/form-data"> <p class="type3"> <select id="shir_3" size="1" name="shir_3"> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> </select> Ширина </p> <!-- ------------------------------------------------- --> </form> </body> </html> [js] function show(num) { if(num == 1) { $(".type1").css("display", "block"); $(".type2").css("display", "none"); $(".type3").css("display", "none"); $(".type4").css("display", "none"); $("#form1").css("display", "block"); $("#form2").css("display", "none"); $("#form3").css("display", "none"); $("#form4").css("display", "none"); } else if (num == 2) { $(".type1").css("display", "none"); $(".type2").css("display", "block"); $(".type3").css("display", "none"); $(".type4").css("display", "none"); $("#form1").css("display", "none"); $("#form2").css("display", "block"); $("#form3").css("display", "none"); $("#form4").css("display", "none"); } else if (num == 3) { $(".type1").css("display", "none"); $(".type2").css("display", "none"); $(".type3").css("display", "block"); $(".type4").css("display", "none"); $("#form1").css("display", "none"); $("#form2").css("display", "none"); $("#form3").css("display", "block"); $("#form4").css("display", "none"); } }[/js]
HTML: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript" src="pack.js"></script> <style type="text/css"> #form1, #form2, #form3, #form4 {display:none;} </style> </head> pack.js [js]function show(num) { $('#form1').hide(); $('#form2').hide(); $('#form3').hide(); $('#form4').hide(); $('#form'+num).show(); }[/js] причина была в неверном оформлении тега <script>