Текст, выделенный жирным шрифтом при нажатии элемента dt (и остается таким до повторного нажатия)

0

Вот мой вопрос на сегодня:

Как заставить элемент тега dt из HTML выделяться жирным шрифтом после щелчка и оставаться полужирным до тех пор, пока не будет нажат другой элемент dt и/или раздел с выпадающим dt будет закрыт?

Я использую Css-лист Bootstrap 2.x/3, и я пытаюсь выяснить, как это сделать без необходимости изменять мой жесткий код или вникать в JavaScript (хотя, если это единственные жизнеспособные варианты, я все уши).

Прямо сейчас мой фрагмент кода:

dt, .close { cursor:pointer; color:#093A7F !important; font-weight:normal; }
dt:active, dt:focus { font-weight:bold !important; }

Опять же, идея состоит в том, чтобы вопрос оставался жирным до тех пор, пока не будет закрыт соответствующий раздел "Ответ". В настоящее время вышеприведенный код выделяет только текст, когда он активно щелкает.

Любая помощь приветствуется.

Благодарю! : D

Теги:
twitter-bootstrap-3

2 ответа

1

Добавьте атрибут tabindex к элементу:

<dl>
    <dt tabindex="1">title</dt>
    <dd>content</dd>
    <dt tabindex="2">title</dt>
    <dd>content</dd>
</dl>

http://jsfiddle.net/y9h8w/

0

Там может быть решение, где вы можете сделать это с помощью radio, имеющих одинаковый атрибут name. Но стиль не самый легкий, и я думаю, что в конце вам придется использовать Javascript.

  • 0
    Это было и мое предположение. У меня есть коллега, который изучает, как это сделать в первую очередь с JS, пока я изучаю сторону css. Пока у меня ничего нет. : / EDIT: Может быть, с обработчиком onStateChange () или что-то?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню