Блог

Я хочу написать / эмулировать полосу вкладок, используя только HTML и CSS.

Я буду постепенно улучшать это с помощью JavaScript и не нуждаюсь в какой-либо помощи с этим.

Я позаимствовал идеи из этой страницы, пример 6

Вот живой пример

Пожалуйста, не стесняйтесь быть педантичным в отношении моей текущей разметки HTML и CSS. Я хочу написать это с нуля, правильно используя стандарты HTML5 и CSS3, и надеюсь избежать моего обычного «Если это работает, качество разметки не имеет значения. jQuery придет и исправит это за меня!» отношение.

Вот мой HTML, который в настоящее время имеет разметку :

 <div class="tabs">
    <section>
        <a> link 1 </a>
        <div> Content 1 </div>
    </section>
    <section>
        <a> link 2 </a>
        <div> Content 2 </div>
    </section>
</div>
  

Вот (урезанный) CSS :

 .tabs {
    width: 100%;
}

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
}

.tabs > section {
    display: inline;
}

.tabs > section:not(:target) > div {   
    position: absolute;
    padding: 20px;
    top: 50px;
    display: block;
    width: 100%;
}
  

Есть 3 проблемы с css, которые меня беспокоят.

1. div.tabs Имеет только плавающие и абсолютные дочерние элементы, поэтому не имеет никакого «реального содержимого» и вокруг него нет границы. Как мне придать ему правильную границу?
2. .tabs > section > div имеет ширину 100%, но не соответствует 100% ширине родительского элемента div.tabs из-за дополнительного заполнения. Здесь не хватает моего понимания коробочной модели. Как мне настроить, чтобы его ширина соответствовала div.tabs родительской?
3. Как мне сделать так, чтобы содержимое .tabs > section > div располагалось прямо под <a> полосой вкладок, не устанавливая для css top значения на привередливое "43px" ? Каков правильный способ сделать общее позиционирование в этих ситуациях?

Отказ от ответственности меня не волнует надлежащая поддержка браузера. Не стесняйтесь использовать HTML5 / CSS3. Я буду использовать JavaScript для надлежащего улучшения функциональности IE8.

Если это поможет, это полный CSS

 .tabs {
    width: 100%;
    border: #000 solid 1px;
}

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
    padding-left: 10px;
    margin-left: 5px;
    margin-right: 5px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid red;
}

.tabs > section {
    display: inline;
}

.tabs > section > div {
    z-index: -2;
    background: white;
    border: 1px solid blue;
}

.tabs > section:not(:target) > div {   
    position: absolute;
    padding: 20px;
    top: 50px;
    display: block;
    width: 100%;
}
  

Мне удалось получить рабочую версию ваших вкладок. Вот версия jsFiddle. (Однако я не смог решить все ваши дилеммы. Читайте ниже.)

CSS:

 .tabs {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding-bottom: 100px;
    border: 1px solid #000;
    }

.tabs > section > a {
    position: relative;
    display: block;
    float: left;
    border: 1px solid red;
    }

.tabs > section > div {
    position: absolute;
    top: 1.5em;
    left: -50000px;
    width: 100%;
    background: #fff;
    border: 1px solid blue;
    }

.tabs > section:target > div {
    left: 0;
    }

.tabs > section:not(:target)#one > div {
    left: 0;
    }
  

HTML:

 <div class="tabs">
    <section id="one">
        <a href="#one">link 1</a>
        <div> Content 1 </div>
    </section>
    <section id="two">
        <a href="#two">link 2</a>
        <div> Content 2 </div>
    </section>
</div>
  

Решение трех вопросов:

1. Вкладка div действительно сворачивается из-за плавающих и абсолютно расположенных объектов. Единственные варианты, которые я вижу, — это установить высоту или переполнение: скрыто с помощью нижнего заполнения.
2. Мне удалось установить ширину, равную ширине div.tabs в моем CSS выше. Вероятно, это функция position: relative .
3. Опять же, поскольку все объекты выведены из потока, я не вижу способа без JavaScript сообщить section > div s о высоте привязки.

PS. Мне понравилось использование :target, и я смог переключить ваш блок содержимого, а также установить значение по умолчанию.

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

 <div class="tabbed-area">

    <ul class="tabs group">
        <li><a href="#box-one">Tab 1</a></li>
        <li><a href="#box-two">Tab 2</a></li>
        <li><a href="#box-three">Tab 3</a></li>
    </ul>

    <div class="box-wrap">

        <div id="box-one">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>
        </div>

        <div id="box-two">
            <p>Feugiat...</p>
        </div>

        <div id="box-three">
            <p>Pellen...</p>
        </div>

    </div>

</div>