我正在学习HTML 5和CSS3，我有麻烦与我的标签导航栏。我认为li:active css样式将实现我的目标，但这只是在点击，并没有保持这种方式。我在网上看了很多教程，但不知道如何只用CSS和HTML做到这一点。如果可能的话，我想避免使用javascript或php。我在几个地方找到了关于"子"元素和使用z-index属性的信息，并认为这可能是一个可能的解决方案，但不明白如何实现它们。它们在悬停时看起来是我想要的样子，但是当我点击它们时，我希望它们保持那种风格，以达到活动选项卡的效果。如有任何建议或帮助，不胜感激。
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>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
</nav>
<article>
Article of Content
</article>
<aside align="right">
Aside of Content
</aside>
<footer>
<span id="cpyrt">© 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;
}
:active仅适用于锚(<a>)和按钮(<button>, <input type="button/>…)，并且仅当它们被按下时。
你需要看一下:target
http://jsfiddle.net/coma/ED6cH/6/