0

我正在学习 HTML 5 和 CSS3，但我的标签式导航栏有问题。我认为 li:active css stlye 会实现我的目标，但这只是在点击时才会保持这种状态。我查看了网络上的许多教程，但无法找到仅使用 CSS 和 HTML 的方法。如果可能，我想避免使用 javascript 或 php。我在几个地方找到了关于“子”元素和使用 z-index 属性的信息，并认为这可能是一个可能的解决方案，但不明白如何实现它们。它们在悬停时看起来像我想要的那样，但我希望它们在我单击它们以产生活动选项卡的效果时保持这种风格。非常感谢任何建议或帮助。

我的 HTML：

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="css/style.css">
    </head>

    <body>

    <header>
    Header
    </header>

    <nav>
      <ul id="tabs">
        <li>link1</li>&nbsp;
        <li>link2</li>&nbsp;
        <li>link3</li>&nbsp;
        <li>link4</li>&nbsp;
      </ul>
    </nav>

    <article>
       Article of Content
    </article>

    <aside align="right">
    Aside of Content
    </aside>

    <footer>
    <span id="cpyrt">&copy; 2013 Footer Content</span>
    </footer>

</body>
</html>

我的CSS：

    body {
    top: 0;
    width: 80%;
    position: fixed;
    margin-left: 10%;
    margin-right: 10%;
    box-shadow: #000 0px 0px 900px;
    height: 100%;
}
header {
    background-color: #06F;
    height: 8%;
    padding: 9px;
    padding-top: 25px;
    box-shadow: inset #000 0px 1px 2px;

}
nav{
    background-color: #333;
    box-shadow: inset #000 -10px -15px 50px;
    float:left;
    width: inherit;
    height: 59px;
}
/*--------------Navigation Tabs Styling ----- START -----------------------------*/
nav li{
    list-style-type: none;
    display: inline-table;
    background-color: #666;
    padding-top:15px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom:7px;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    text-align:center;
    -webkit-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s  ease;
    -moz-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s  ease;
    -o-transition: background-color 0.2s ease, color 0.1s linear, height 0.0s  ease;
    box-shadow: #000 0px 1px 10px;
    color: white;
}
nav li:hover{
    list-style-type: none;
    display: inline-table;
    background-color:#09F;
    padding-top:15px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom:7px;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    color: black;
    text-align:center;
    box-shadow: inset #FFF 0px 1px 4px;
    height: 30px;
    margin-top: -3px;
}
nav li:active{
    list-style-type: none;
    display: inline-table;
    background-color:#02F;
    padding-top:15px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom:7px;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    border:none;
}
/*--------------Navigation Tabs Styling ----- END -----------------------------*/
article{
    padding: 5px;
    float: left;
    background-color: #ddd;
    height: inherit;
    width: inherit;
    box-shadow: inset #000 0px 1px 2px;

}
aside{
    top: auto;
    padding: 10px;
    position: fixed;
    right: 10%;
    background-color: #CCC;
    width: 17%;
    height: inherit;
    float: right;
    box-shadow: inset #000 0px 1px 2px;
}

footer {
    position: fixed;
    bottom: 0;
    background-color: #06F;
    width: inherit;
    height:8%;
    padding-top: 5px;
    box-shadow: inset #000 0px 1px 2px;
    margin-right: 15px;
}
4

1 回答 1

2

:active仅适用于锚点 ( <a>) 和按钮 ( <button>, <input type="button/>...) 并且仅在它们被按下时。

你需要看看:target

http://jsfiddle.net/coma/ED6cH/6/

HTML

<div class="tabbed">
    <a href="#dog" id="dog">
        Dog
        <div>
            <p>This is a dog...</p>
        </div>
    </a>
    <a href="#cat" id="cat">
        Cat
        <div>
            <p>This is a cat...</p>
        </div>
    </a>
    <a href="#foo" id="foo">
        Foo
        <div>
            <p>This is a foo...</p>
        </div>
    </a>
</div>

CSS

div.tabbed {
    position: relative;
    font-size: 0;
}

div.tabbed > a {
    display: inline-block;
    padding: .5em;
    font-size: 16px;
    border-radius: 3px 3px 0 0;
    background-color: #333;
    color: #eee;
    text-decoration: none;
    line-height: 1em;
}

div.tabbed > a + a {
    margin-left: .5em;
}

div.tabbed > a:target {
    color: #333;
    background-color: #eee;
}

div.tabbed > a > div {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    padding: .5em;
    border-radius: 0 3px 3px 3px;
    display: none;
    color: #333;
    background-color: #eee;
}

div.tabbed > a:target > div {
    display: block;
}

:target 伪选择器将 URL 哈希 ( http://foo.com#this_is_the_hash ) 中的内容与具有该哈希字符串作为 id 的元素匹配。

还有另一种使用过渡很长时间的hackish方法：

http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/

疯狂的：

http://dabblet.com/gist/2076449

于 2013-05-12T20:32:05.917 回答