How do I make my HTML5 nav li tab stay active on click with CSS3?

问题

I am learning HTML 5 and CSS3 and am having trouble with my tabbed navigation bar. I thought the li:active css stlye would achieve my goal but that only is upon click and doesn't stay that way. I have looked at many tutorials across the web and cannot find out how to do this with just CSS and HTML. I would like to avoid using javascript or php if possible. I have found information in a few places on "child" elements and using the z-index properties, and think this may be a possible solution, but do not understand how to implement them. They look how I want on hover, but I want them to stay that style when I click them to give the effect of an active tab. Any advice or help is greatly appreciated.

My 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>

MY 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;
}

回答1:

:active only applies to anchors (<a>) and buttons (<button>, <input type="button/>...) and only while they are pressed.

You need to take a look at :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;
}

The :target pseudo selector matches what's in the URL hash (http://foo.com#this_is_the_hash) with the element having that hash string as id.

There is another hackish method using transition with very long time:

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

Insane:

http://dabblet.com/gist/2076449

来源：https://stackoverflow.com/questions/16511723/how-do-i-make-my-html5-nav-li-tab-stay-active-on-click-with-css3

标签

html5