: целевой псевдоселектор и вкладки - PullRequest
Новая
       0

: целевой псевдоселектор и вкладки

3 голосов
/ 12 ноября 2011

Итак, я хочу создать систему вкладок, используя только CSS.

то, что у меня есть, работает, но я не знаю, как сделать одну вкладку видимой по умолчанию.

Вкладки: 

<section class="tabs">

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

  <section id="tab1"> content for 1... </section>
  <section id="tab2"> content for 2... </section>
  <section id="tab3"> content for 3... </section>

</section>

и css (самая важная часть): 

.tabs section{
 display: none;
}

.tabs section:target{
 display: block;
}

Итак, если я установлю section:first-child на блокировку (первая вкладка должна быть видимой по умолчанию), тогда я получу два видимых раздела, если в URL есть привязка: первая вкладка и целевая вкладка ...

Как мне преодолеть эту проблему?

1 Ответ

4 голосов
/ 12 ноября 2011

Ну, если вы сделаете вашу последнюю вкладку по умолчанию (section:last-child), то я думаю, что это может сработать: 

.tabs section,
.tabs section:target ~ section {
   display: none;
}

Использование общего селектора брата ~ требует, чтобы элемент предшествовал родным братьямоно нацелено, поэтому причина для требования last-child, а не * 1007. *.

РЕДАКТИРОВАТЬ: 11-12-2011, Я нашел способ для вас выделить ваши теги aкак активный! Предполагая, что он соответствует вашему конкретному применению.Вот простой модифицированный код для проверки концепции (проверен только на FF):

HTML 

<section class="tabs">
  <ul class="nav">
   <li><a href="#tab1">1</a></li>
   <li><a href="#tab2">2</a></li>
   <li><a href="#tab3">3</a></li>
  </ul>


  <section id="tab2"><div class="tabActive"></div> content for 2... </section>
  <section id="tab3"><div class="tabActive"></div> content for 3... </section>
  <section id="tab1"><div class="tabActive"></div> content for 1... </section>

</section>

CSS 

.nav {
    position: relative;
    z-index: 2;
    margin: 10px .5em 0;
}
.nav li {
    padding: .5em;
    width: 2em;
    text-align: center;
    float: left;
}

.tabs section,
.tabs section:target ~ section {
   display: none;
}

.tabs section:target,
.tabs section:last-child {
    display: block;
    clear: left;
    margin: 0 .5em;
    min-width: 300px;  /* for show only */
    min-height: 200px; /* for show only */
    border: 1px solid black;   
    position: relative;
    z-index: 1;
    padding: 10px;
}

.tabActive { /* set for tab 1 */
    width: 2em;
    height: 2em;
    position: absolute;
    top: -2em;
    left: .5em;
    border: 1px solid black;
    border-bottom: transparent;
    background-color: inherit;
    margin-top: -1px; /* top border height */
    margin-left: -1px; /* left border width */
}

#tab1 {background-color: cyan;}
#tab2 {background-color: yellow;}
#tab3 {background-color: pink;}

#tab2 .tabActive {left: 3.5em;}
#tab3 .tabActive {left: 6.5em;}
...