Как сделать вкладки UL только с HTML CSS - PullRequest
2 голосов
/ 03 января 2012

Попытка выяснить, как это сделать.У меня есть стиль, но я бы хотел, чтобы что-то произошло после того, как я нажму на вкладки.Я хотел бы, чтобы div с именами классов вкладок отображался и скрывался при нажатии на вкладки.Я предполагаю, как это будет работать.Прямо сейчас, когда я нажимаю на вкладки, ничего не происходит.

Вот мой HTML

    <style type="text/css">
      ul.tabs {
          display: table;
          list-style-type: none;
          margin: 0;
          padding: 0;
      }

      ul.tabs>li {
          float: left;
          padding: 10px;
          background-color: lightgray;
      }

      ul.tabs>li:hover {
          background-color: lightgray;
      }

      ul.tabs>li.selected {
          background-color: lightgray;
      }

      div.content {
          border: 1px solid black;
      }

      ul { overflow: auto; }

      div.content { clear: both; }
    </style>
<body>
    <ul class="tabs">
        <li><a href="#tab1">Description</a></li>
        <li><a href="#tab2">Specs</a></li>
    </ul>
    <div class="pane">
        <div class="tab1">
            <div><h2>Hello</h2></div>
        <div />
        <div>Hello hello hello.</div>
        <div />
        <div>Goodbye goodbye, goodbye</div>
        <div />
        <div />

        </div>
        <div class="tab2" style="display:none;">
        <div><h2>Hello2</h2></div>
        <div />
        <div>Hello2 hello2 hello2.</div>
        <div />
        <div>Goodbye2 goodbye2, goodbye2</div>
        <div />
        </div>
    </div>
    <div class="content">
        This should really appear on a new line.
    </div>
</body>

Ответы [ 3 ]

6 голосов
/ 03 января 2012

Стандартный ответ: Вы не можете.К сожалению, нет способа сделать это только с помощью HTML / CSS2.Мы можем сделать раскрывающиеся списки в CSS с помощью psuedo-класса :hover, но нет эквивалента для кликов.Посмотрите на одно из этих решений на основе Javascript .

Секретный ответ: CSS3 [вид] поддерживает это.Но вы должны создать радио кнопки [странно], и это не поддерживается в IE7 / 8. Если вы решитесь ...

И если вы не возражаете против использования Javascript, вот быстрое решение.В первую очередь переформатировал ваш HTML.Не нужно помещать <h2> s в <div> s и использовать <br /> для перерывов - вот для чего это нужно.Также я изменил вкладку <div> s, чтобы использовать идентификаторы вместо классов.Если у вас есть уникальные идентификаторы для элемента, используйте id.

<ul class="tabs">
    <li><a href="#tab1">Description</a></li>
    <li><a href="#tab2">Specs</a></li>
</ul>
<div class="pane">
    <div id="tab1">
        <h2>Hello</h2>
        <p>Hello hello hello.</p>
        <p>Goodbye goodbye, goodbye</p>
    </div>
    <div id="tab2" style="display:none;">
        <h2>Hello2</h2>
        <p>Hello2 hello2 hello2.</p>
        <p>Goodbye2 goodbye2, goodbye2</p>
    </div>
</div>
<div class="content">This should really appear on a new line.</div>

Не трогал ваш CSS.

Для Javascript, я рекомендую использовать jQuery .Это действительно упрощает вещи.Все, что вам нужно, это следующие строки кода:

$(document).ready(function() {
    $("ul.tabs a").click(function() {
        $(".pane div").hide();
        $($(this).attr("href")).show();
    });
})

Обычно, когда страница готова [загружена], ищите все ссылки, которые являются дочерними для вкладок ul.Присоедините функцию, которая запускается при каждом нажатии этой ссылки.Когда указанная ссылка нажата, скрыть все вкладки в элементе .pane.Затем воспользуйтесь ссылкой href, чтобы найти нужную вкладку div и показать ее.

скрипка: http://jsfiddle.net/uFALn/18/

0 голосов
/ 27 марта 2013

Спасибо, Бенеш. Это мне тоже помогло.

Можно также добавить return false, чтобы предотвратить этот резкий прыжок на якорь. Например:

$("ul.tabs a").click(function() {
    $(".pane div").hide();
    $($(this).attr("href")).show();
    return false;
});
0 голосов
/ 03 января 2012

Из-за плавающих элементов <li> ваш элемент <ul> имеет нулевую высоту.

Попробуйте добавить ul { overflow: auto; } и div.content { clear: both; } к вашему CSS

...