jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

update

Browse source
This commit is contained in:
Ilya Kantor 2014-11-16 01:40:20 +03:00
parent 962caebbb7
commit 87bf53d076
1825 changed files with 94929 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

29
2-ui/5-widgets/3-widgets-markup/2-markup-errors/solution.md Normal file
View file

@ -0,0 +1,29 @@
<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>
```