：目标伪选择器和选项卡 [英] :target pseudo selector and tabs

问题描述

所以我想使用CSS创建一个标签系统。

So I want to create a tab system using only CSS.

到目前为止，我不知道如何使一个标签可见默认。

what I have so far works, but I don't know how to make one tab visible by default.

标签：

<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（最重要的部分）：

and the css (the most important part):

.tabs section{
 display: none;
}

.tabs section:target{
 display: block;
}

所以如果我设置 child 到块（默认情况下第一个选项卡应该可见），然后我得到两个可见的部分，如果有一个锚点：第一个选项卡和目标选项卡...

So I if I set the section:first-child to block (first tab should be visible by default), then I get two visible sections if there's a anchor in the URL: the first tab, and the target tab...

如何解决这个问题？

推荐答案

最后一个标签（部分：last-child ），然后我认为这可以工作：

Well, if you make your default your last tab (section:last-child), then I think this could work:

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

使用一般的sibling选择器〜要求元素在它指定的同级元素之前，所以因此 last-child 而不是 first-child 需求。

Using the general sibling selector ~ requires that the element precede the siblings it targets, so hence the reason for the last-child rather than first-child requirement.

编辑：11-12-2011，我找到了一种方法来突出显示您的 code>标记为有效！假设它符合您的特定应用程序。下面是一些简单的修改代码，用于证明概念（仅在FF中测试）：

11-12-2011, I did find a way for you to highlight your a tags as active! Assuming it meets your particular application. Here is some simple modified code for proof of concept (only tested in 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;}

这篇关于：目标伪选择器和选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！