Мой Сайт
Главная
Направление
Web-программирование
Новости
<div class="circle"> </div> <fieldset> <legend>Цвет:</legend> <div> <input type="radio" id="yellow" name="color" value="yellow" checked /> <label for="yellow">Желтый</label> </div> <div> <input type="radio" id="green" name="color" value="green" /> <label for="green">Зеленый</label> </div> <div> <input type="radio" id="blue" name="color" value="blue" /> <label for="blue">Синий</label> </div> </fieldset> <fieldset> <legend>Размер:</legend> <div> <input type="radio" id="100" name="size" value="100" checked /> <label for="100">100</label> </div> <div> <input type="radio" id="250" name="size" value="250" /> <label for="250">250</label> </div> <div> <input type="radio" id="500" name="size" value="500" /> <label for="500">500</label> </div> </fieldset>
jQuery(function ($) { $("#yellow").click(function () { $("#yellowcontent").show(); $(".circle").css("background-color", "yellow"); }); $("#green").click(function () { $("#greencontent").show(); $(".circle").css("background-color", "green"); }); $("#blue").click(function () { $("#bluecontent").show(); $(".circle").css("background-color", "blue"); }); $("#100").click(function () { $("#100content").show(); $(".circle").css("width", "100px"); $(".circle").css("height", "100px"); }); $("#250").click(function () { $("#250content").show(); $(".circle").css("width", "250px"); $(".circle").css("height", "250px"); }); $("#500").click(function () { $("#500content").show(); $(".circle").css("width", "500px"); $(".circle").css("height", "500px"); }); });
.circle { width: 300px; height: 300px; text-align: center; border-radius: 50%; border: 1px solid black; background-color: red; }
Results:
Цвет:
Желтый
Зеленый
Синий
Размер:
100
250
500