Html 为什么我的 nav ul li:active 背景颜色不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22493954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my nav ul li:active background color not working?
提问by user3381910
In my navigation I want to be able to and click on a navigation link and have the li item change color when you go the page. Eg. I click on the about us tab in the navigation, it goes to the about us page and the about us page tab in the navigation bar has changed color. I tried nav ul li:active but it is not working.
在我的导航中，我希望能够点击导航链接并在您进入页面时让 li 项目更改颜色。例如。我单击导航中的关于我们选项卡，它转到关于我们页面，导航栏中的关于我们页面选项卡已更改颜色。我试过 nav ul li:active 但它不起作用。
Here is the css:
这是CSS：
#nav {
display: block;
position:relative;
border: 1px solid #002799;
background: linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
padding: 0px 0px 0px 0px;
border-radius: 15px;
height: 40px;
width: 470px;
margin: 0px auto;
font: Bold 16px Verdana;
}
#nav ul {
margin: 0px;
padding: 0px;
min-width:250%;
}
#nav li {
list-style: none;
float: left;
position: relative;
display:inline;
width:auto;
}
#nav ul li {
list-style: none;
float: left;
position: relative;
}
#nav ul li:last-child a {
border:none;
}
#nav ul li:hover {
background: #060652;
}
#nav ul li:active {
background: #060652;
}
#nav ul li:hover ul {
display:block;
width:100%;
}
#nav ul ul {
display: none;
position:absolute;
left:0px;
min-width:250%;
z-index: 999;
background-color: #4970E3;
}
#nav ul ul li {
border: 1px solid #FFFFFF;
display:block;
float: none;
z-index: 999;
width: auto;
}
#nav ul ul li a {
border-right: none;
font: Bold 16px Verdana;
width: auto;
}
#nav ul li a {
text-decoration: none;
display: block;
border-right: 1px solid #121B3E;
padding: 10px 15px;
color: #fbfbfb !important;
}
Here is the html:
这是html：
<div id="nav">
<ul>
<li><a href="http://osweb01.ostech.com.au/">Home</a>
</li>
<li><a href="http://osweb01.ostech.com.au/?page_id=12">About Us</a>
<ul>
<li><a href="http://osweb01.ostech.com.au/?page_id=19">Why OSTech</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=21">Testimonials</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=23 ">Case Study 1</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=25">Case Study 2</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=27">Green IT</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=29">OSdesk Intel vPro</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=31">Workstation Innovation</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=33">Consolidation and Centralisation</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=35">The Green Grid</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=37">Clean Technologies</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=39">OSdesk Remote Management</a></li>
</ul>
</li>
<li><a>What We Do</a>
<ul>
<li><a href="http://osweb01.ostech.com.au/?page_id=41">OSdesk</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=43">OSguard</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=45">OSmon</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=47">OSvault & OSclass</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=49">OSmail & OShost & OSshare</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=52">OStrack & OSdms</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=54">OSarchive & OSgroup</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=62">OSfaq & OShelp</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
</ul>
</li>
<li><a href="http://osweb01.ostech.com.au/?page_id=16">Contact Us</a><ul>
</li>
</ul>
</div>
回答by SpoonMeiser
You've misunderstood what :activemeans.
你误解了什么:active意思。
Your web browser has no concept of which lion the page represent the currentpage, unless you tell it somehow.
您的 Web 浏览器不知道页面li上的哪个代表当前页面，除非您以某种方式告诉它。
The active selector selects the active link. That is, a link you've selected using keyboard navigation (but haven't followed yet) or a link you've just clicked on (before the new page loads). Once the new page loads, none of the links are active again.
活动选择器选择活动链接。也就是说，您使用键盘导航选择的链接（但尚未关注）或您刚刚点击的链接（在新页面加载之前）。新页面加载后，所有链接都不再处于活动状态。
So, you can only use :activeon aelements, and not for what you're trying to do here.
因此，您只能:active在a元素上使用，而不能用于您在此处尝试执行的操作。
Instead, you want to add a class to the lifor whichever tab represent the current page, and use CSS to style that liappropriately:
相反，您希望为li代表当前页面的任何选项卡添加一个类，并使用 CSSli适当地设置样式：
<li><a href="...">Why OSTech</a></li>
<li class="current"><a href="...">Testimonials</a></li>
<li><a href="...">Case Study 1</a></li>
with:
和：
li.current {
background: #060652;
}
回答by Ming
:activeis only the action when the link is actively pressed, so you can see it clearly if you click on the link and hold down on it, instead of letting go.
:active只是链接被主动按下时的动作，所以如果你点击链接并按住它，你可以清楚地看到它，而不是松手。
In order to do this you will need to assign a class to the afor the page that is open. There are ways to accomplish this with a server-side language so you don't have to do it manually, but if you are making a static .htmlpage, you will need to manually add a class (like class="active") to the afor each page that is "active".
为此，您需要a为打开的页面分配一个类。有一些方法可以使用服务器端语言完成此操作，因此您不必手动执行此操作，但是如果您正在制作静态.html页面，则需要为每个页面手动添加一个类（如class="active"）a“积极的”。
So for example:
例如：
menu.htmlwill have <a href="menu.html" class="active">Menu</a>and <a href="about.html">About</a>
menu.html将有<a href="menu.html" class="active">Menu</a>和<a href="about.html">About</a>
Whereas about.htmlwill have <a href="menu.html">Menu</a>and <a href="about.html" class="active">About</a>
鉴于about.html将有<a href="menu.html">Menu</a>和<a href="about.html" class="active">About</a>
回答by Aister
Just as everyone said, you'll need to use a separate class for the a, :activewon't work like what you want.
正如每个人所说的，你需要为 a 使用一个单独的类，:active不会像你想要的那样工作。
However, if you use the $_GET['page_id'] value you can set the class automatically. Like this:
但是，如果您使用 $_GET['page_id'] 值，您可以自动设置类。像这样：
<li><a <?php if ($_GET['page_id'] == 56) { echo 'class="active" '; } ?>href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
You can even go an extra mile, and have the page_idstored in an array at the top of the php file. And do a foreach loop and echo out the links as well as class.
您甚至可以更进一步，并将其page_id存储在 php 文件顶部的数组中。并执行 foreach 循环并回显链接和类。
<li><a>What We Do</a>
<ul><?php
$menu1 = array ( 41,43,45,47,49,52,54,62,56 );
foreach ($menu1 as $menu_item) {
echo "<li><a ";
if ($_GET['page_id'] == $menu_item) { echo 'class="active" '; }
echo 'href="http://osweb01.ostech.com.au/?page_id='.$menu_item.'">OSbill & OScal</a></li>';
} ?>
</ul>
</li>
回答by htmlfool
If the above doesn't work (which it didn't for me) just apply a different colour to your navigation bar depending on which page you are on.
如果上述方法不起作用（对我来说不起作用），只需根据您所在的页面对导航栏应用不同的颜色即可。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li b {
background-color: green;
}
li a:hover {
background-color: red;
color: white;
}
Use code as above? Simple navigation bar with 'active' faked out.
使用上面的代码？带有“活动”的简单导航栏。
<ul>
<li><b href = "homepage.html">Homepage</a></li>
</ul>
回答by Corey Young
To extend on what @Aister posted I would not use echo on the html but
为了扩展@Aister 发布的内容，我不会在 html 上使用 echo，但是
<li>
<a>What We Do</a>
<ul>
<?php
$menu1 = array ( 41,43,45,47,49,52,54,62,56 );
foreach ($menu1 as $menu_item) {
?>
<li>
<a <?= ($_GET['page_id'] == $menu_item)? 'class="active" ' : '';?> href="http://osweb01.ostech.com.au/?page_id=<?=$menu_item?>">OSbill & OScal</a>
</li>
<?php
}
?>
</ul>
</li>
The main advantage in this approach is that your templates will be a lot easier to read in your editor because the html syntax highlighting will recognize the HTML and not just see a string.
这种方法的主要优点是您的模板在编辑器中更容易阅读，因为 html 语法突出显示将识别 HTML，而不仅仅是看到一个字符串。
One caveat to my approach is that you need to have the php ini configured to allow short tags or it will break. If it doesn't work and you can't change it replace
对我的方法的一个警告是，您需要将 php ini 配置为允许短标签，否则它会中断。如果它不起作用并且你不能改变它替换
<?=
with
和
<?php echo
