Урок посвящен работе над тегом input, который имеет значение radio и может в теге form свободно динамически переключаться между вкладками. То есть выбрал input, появилось что то, выбрал другой input появилось еще что то и т.д. Сам скрипт разработан на языке JavaScript.
Для начала ознакомимся с кодом на JavaScript. В коде я подробно расписал все в комментариях, думаю не может возникнуть каких-либо вопросов.
<script type="text/javascript">
function toggleSlide(set)
// устанавливаем функцию с параметром set
{
var type = set.value;
// задаем переменную с параметром set и значением value
for(var numb=0,elm;elm=set.form.elements[numb];numb++)
// создаем цикл for в котором чередуем и проверяем
// элементы для тега form
if(elm.className=='select_id')
// если класс у элемента select_id, то ...
elm.style.display = elm.id==type? 'inline':'';
// сбрасываем значения стиля display: none и
// выставляем значения display: inline каждому
// открывающимуся тегу fieldset с классом select_id
}
</script>
Затем мы выводим теги input, устанавливаем каждому значения value, также имя name и придаем событие onclick="toggleSlide(this)".
<table> <tr> <td width='200'> <strong>Радио пусто</strong> <input type="radio" name="name" value="0" onclick="toggleSlide(this)" checked> </td> <td width='200'> <strong>Радио 1</strong> <input type="radio" name="name" value="1" onclick="toggleSlide(this)"> </td> <td width='200'> <strong>Радио 2</strong> <input type="radio" name="name" value="2" onclick="toggleSlide(this)"> </td> </tr> </table>
В дальнейшем все выводим в тегах fieldset, которым указываем, соответствующие идентификаторы, которые были указаны в value у тегов input и устанавливаем класс select_id.
<table> <tr> <td> <fieldset id="1" class="select_id"> <p>Открыто значение <b>Радио 1</b></p> </fieldset> </td> <td> <fieldset id="2" class="select_id"> <p>Открыто значение <b>Радио 2</b></p> </fieldset> </td> </tr> </table>
И не забудем указать стили css, которые очень важны(иначе скрипт работать будет не правильным образом).
/*Обязательная установка стиля для тега
fieldset display: none*/
fieldset
{
display: none;
padding: 10px;
}
Весь код скрипта: не забываем его заключить в тег form, а то не будет работать!
<form>
<style>
/*Обязательная установка стиля для тега
fieldset display: none*/
fieldset
{
display: none;
padding: 10px;
}
</style>
<script type="text/javascript">
function toggleSlide(set)
// устанавливаем функцию с параметром set
{
var type = set.value;
// задаем переменную с параметром set и значением value
for(var numb=0,elm;elm=set.form.elements[numb];numb++)
// создаем цикл for в котором чередуем и проверяем
// элементы для тега form
if(elm.className=='select_id')
// если класс у элемента select_id, то ...
elm.style.display = elm.id==type? 'inline':'';
// сбрасываем значения стиля display: none и
// выставляем значения display: inline каждому
// открывающимуся тегу fieldset с классом select_id
}
</script>
<table>
<tr>
<td width='200'>
<strong>Радио пусто</strong>
<input type="radio" name="name" value="0"
onclick="toggleSlide(this)" checked>
</td>
<td width='200'>
<strong>Радио 1</strong>
<input type="radio" name="name" value="1"
onclick="toggleSlide(this)">
</td>
<td width='200'>
<strong>Радио 2</strong>
<input type="radio" name="name" value="2"
onclick="toggleSlide(this)">
</td>
</tr>
</table><br>
<table>
<tr>
<td>
<fieldset id="1" class="select_id">
<p>Открыто значение <b>Радио 1</b></p>
</fieldset>
</td>
<td>
<fieldset id="2" class="select_id">
<p>Открыто значение <b>Радио 2</b></p>
</fieldset>
</td>
</tr>
</table>
</form>
Спасибо за внимание, всем успехов в своих реализациях!