Фокус при табуляции
Народ, я тока-тока вот стал изучать...
Помогите, а, решить один вопросик. У меня еть такая штука: <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">Выбор 1</label> <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">Выбор 2</label> <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">Выбор 3</label> Суть в том, что человек заполняющий форму на сайте не прибегает к использованию мыши, поэтому я бы хотел, чтобы по нажатию {TAB} когда фокус попадает на чекбокс, то эта строка с конкретным чекбокбоксом подсвечивалась бы, ну и естественно, подсветка снималась, после ухода табуляции. Подсобите как и чем такое можно решить? |
$(':checkbox').focus(function () { $(this).next().addClass('класс'); }).blur(function () { $(this).next().removeClass('класс'); }); |
exec,
но что-то не сработало... добавил такой класс #onbox { color: #FFCC00; } никаких изменений, на новичка не обессудьте..., что я не так делаю? |
.onbox
|
Цитата:
|
всё перепробвал, сейчас у меня так на странице:
<head> <style> .onbox { color: #FFCC00; } </style> </head> <body>... <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">Выбор 1</label> <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">Выбор 2</label> <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">Выбор 3</label> ... </body> </script> $('.checkbox').focus(function () { $(this).next().addClass('onbox'); }).blur(function () { $(this).next().removeClass('onbox'); }); </script> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Some test</title> <style type="text/css"> input:focus ~ label { color: #FFCC00; } </style> </head> <body> <p><input id="ch1" type="checkbox" name="1" value="1" /> <label for="ch1">One</label></p> <p><input id="ch2" type="checkbox" name="2" value="2" /> <label for="ch2">Two</label></p> <p><input id="ch3" type="checkbox" name="3" value="3" /> <label for="ch3">Three</label></p> </body> </html> |
Цитата:
e1f, некроссбраузерно. UPD: рабочий пример: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> </script> <style type="text/css"> .onbox { color: red; } </style> </head> <body> <input type="checkbox" id="ch1" /> <label for="ch1"> Number one </label> <br /> <input type="checkbox" id="ch2" /> <label for="ch2"> Number two </label> <br /> <input type="checkbox" id="ch3" /> <label for="ch3"> Number three </label> <script type="text/javascript"> $(':checkbox').focus(function () { $(this).next().addClass('onbox'); }).blur(function () { $(this).next().removeClass('onbox'); }); </script> </body> </html> |
exec,
я ошибся, пардон, я чисто экспериментировал. у меня написано так: $(':checkbox') но всё равно не работает. в примере e1f, у меня вообще вместо чекбоксов - инпутбоксы, и тоже не работает подсветка... может это чисто у меня в браузере такая проблема? у меня IE8 |
sergeos, посмотрите мой предыдущий пост, я добавил рабочий пример.
|
Часовой пояс GMT +3, время: 04:14. |