HTML-интерфейс с использованием только CSS

Question

возможно ли создать интерфейс с вкладками, используя только CSS, без JavaScript?Я имею в виду, чтобы иметь возможность переключать вкладки с помощью CSS / HTML, без JavaScript.Может быть, с CSS 3.0?

разметка будет выглядеть примерно так:

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

<div id="tab1"> ...1... </div>
<div id="tab2"> ...2... </div>
<div id="tab3"> ...3... </div>

Answer 1

:target обычно является предпочтительным способом выполнения вкладок.

Вы также можете быть умным с input:radio или input:checkbox элементами.

http://jsfiddle.net/nzYnc/

HTML:

<label for="one">One</label>
<label for="two">Two</label>
<label for="three">Three</label>

<input type="radio" id="one" name="tab" checked="checked" />
<div>
    First content
</div>
<input type="radio" id="two" name="tab" />
<div>
    Second content
</div>
<input type="radio" id="three" name="tab" />
<div>
    Third content
</div>

CSS:

input
{
    position: absolute;
    right: 100%;
}

input:checked + div
{
    display: block;
}
div
{
    display: none;
}

Использование селекторов next-sibling (+) и :checked умными способами может позволить вам создать чистый CSSаккордеон, переключаемые списки или вкладки вроде этого.

Answer 2

В чистом CSS3 вы можете использовать селектор :target для достижения «интерфейса с вкладками».
Просто Google "вкладка css3: цель". Вот учебник об этом.

Answer 3

Это возможно с html и css для большинства современных браузеров, использующих свойство border-radius (не поддерживается Internet Explorer 8 и ниже).

CSS

li {-moz-border-radius: 12px 12px 0 0; /* FF1+ */
  -webkit-border-radius: 12px 12px 0 0; /* Saf3-4 */
    border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome */
    border:1px solid black;
    display:inline;
    list-style-type:none;
    padding:5px;
  }
  li:hover {background:black;}
  li a {text-decoration:none; color:black;}
  li a:hover {color:white;}

HTML

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

Для поддержки Internet Explorer вы можете использовать css3pie , но вы должны помнить, что он использует javascript.

Более подробную информацию о border-radius можно найти по адресу: http://www.w3.org/TR/css3-background/#the-border-radius

.

Пример: http://jsbin.com/idiza5/2

Answer 4

Несколько дней назад в твиттере была очень популярна какая-то ссылка:
ДЕМО: http://cssglobe.com/lab/css3_tabs/01.html
Учебник: http://cssglobe.com/post/9579/styling-full-width-tabs-with-css3

Надеюсь, это поможет: D

EDIT: О, теперь я вижу, что он использует JavaScript. Чтобы сделать «вкладки», вы должны сделать некоторые div (при нажатии) изменить CSS-свойства для другого div, я не знаю, можете ли вы использовать любой вид селекторов в css3 ...