Профиль пользователя как на dle-faq.ru

Я себе сделал на css, без js

HTML:

<div class="tabsLink">
        <a href="#tab1">Вкладка 1</a>
        <a href="#tab2">Вкладка 2</a>
        </div>
        
        <br>
        <a class="tabs" id="tab1"></a>
        <div class="tab">
        Вкладка 1 <br>
        </div>
        
        <a class="tabs" id="tab2"></a>
        <div class="tab">
    Вкладка 2 <br>
        </div>

CSS:

.tabs {
    opacity: 0;  /* Прозрачность */
    visibility: hidden; /* Изначально - спрятан */
}
.tab{
    position:absolute; /* Абсолютное позиционирование */
    visibility: hidden;    /* Изначально - спрятан */
    z-index: 10;    /* z-index */
    color:#478CFB; /* Цвет */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
}.tabs:target+.tab {
    opacity: 1; /* Убирает прозрачность */
    visibility: visible; /* Делает видимым */
}.tabsLink a{
    background-color:#478CFB; /* Цвет */
    padding:5px; /* Внутренние отступы */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
    color:#fff; /* Цвет */
    text-decoration:none; /* Отсутствие нижней линии */
    
    /* Округление старт */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Округление конец */
}

Взял в Блюкод.ру

Демо: _http://bluecode.ru/demo/97/index.html

Минусы:
1. Надо довести дизайн до ума
2. Сделано на якорях, поэтому если зайти прямой системной ссылкой: сайт.ру/юзер/имя_юзера, будет пустое окно с вкладками, чтобы увидеть инфо о себе или "редактировать" приходиться нажимать на какую-нибудь вкладку - полагаю проблема решаема, если шаблоны править и дать ссылку на конкретный якорь(вкладку).

Плюсы:
1.Можно сослаться на конкретный якорь(вкладку)
2. Где-то на DLE-FAQ читал что, есть такая проблема когда страница грузиться(еще в процессе загрузки) показываются все элементы и только потом после загрузки прячутся элементы, которые по сути должны быть не видны до события(клика). Этот код грузил на нескольких скоростях, такой проблемы не обнаружил.

хотел добавить, тем у кого дергается при клике замените везде след. css:

visibility: hidden

на

display:none

и

visibility: visible

на

display:block