Стандартный ответ: Вы не можете.К сожалению, нет способа сделать это только с помощью 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/