29 lines
2 KiB
Markdown
29 lines
2 KiB
Markdown
<ul>
|
||
<li>Самая главная ошибка: классы без префиксов. Это означает, что если внутри содержимого будет что-либо с классом `.headers`, то стили оформят это как заголовок таба. Что, конечно же, будет неверно.</li>
|
||
<li>Класс `selected`, соответствующий "текущей" выбранной вкладке, находится на ссылке:
|
||
|
||
```html
|
||
<li><a href="#tabs-3" class="selected">Открытая вкладка</a></li>
|
||
```
|
||
|
||
...Но состояние "выбранности" относится к заголовку `LI` целиком. Для его нормального отображения класс должен быть на `LI`.</li>
|
||
<li>В использовании `.tabs > div` особо криминала нет, но нужно учесть, что добавить `DIV` с другим функционалом на этот уровень будет затруднительно. Иначе говоря, такая вёрстка усложняет расширение виджета. Лучше использовать для вкладки класс с префиксом `<div class="tabs-tab">` и, соответственно, селектор `.tabs-tab`.</li>
|
||
</ul>
|
||
|
||
Правильный вариант:
|
||
|
||
```html
|
||
<div id="tabs" class="tabs">
|
||
<ul class="*!*tabs-headers*/!*">
|
||
<li><a href="#tabs-1">Вкладка 1</a></li>
|
||
<li><a href="#tabs-2">Вкладка 2</a></li>
|
||
<li *!*class="tabs-selected"*/!*><a href="#tabs-3">Открытая..</a></li>
|
||
</ul>
|
||
<div *!*class="tabs-tab"*/!* id="tabs-1">Содержимое...</div>
|
||
<div *!*class="tabs-tab"*/!* id="tabs-2">Содержимое...</div>
|
||
<div *!*class="tabs-tab"*/!* id="tabs-3" class="*!*tabs-selected*/!*">
|
||
Посетитель видит содержимое третьей вкладки.
|
||
</div>
|
||
</div>
|
||
```
|
||
|