HTML / CSS Tabstrip

Question

Я хочу написать / эмулировать вкладку с использованием только 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%;
}

Answer 1

Мне удалось получить рабочую версию ваших вкладок. Вот версия 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 знал о высоте привязки.

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

Answer 2

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

<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>