在我的导航中，我希望能够并单击导航链接，并在您转到页面时让li项目更改颜色。例如。我单击导航中的“关于我们”选项卡，它会转到“关于我们”页面，导航栏中的“关于我们页面”选项卡已更改颜色。我尝试了导航ul li：主动但不起作用。
这是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;
}
这是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>
答案 0 :(得分：7)
您误解了:active的含义。
您的网络浏览器没有关于页面上li代表当前页面的概念，除非您以某种方式告诉它。
活动选择器选择活动链接。也就是说，您使用键盘导航选择了一个链接（但尚未关注）或您刚刚点击的链接（在新页面加载之前）。加载新页面后，没有任何链接再次处于活动状态。
因此，您只能在:active个元素上使用a，而不能在此处尝试使用此内容。
相反，您希望为li添加一个类，以代表当前页面的任何选项卡，并使用CSS来适当地设置li样式：
<li><a href="...">Why OSTech</a></li>
<li class="current"><a href="...">Testimonials</a></li>
<li><a href="...">Case Study 1</a></li>
使用：
li.current {
background: #060652;
}
答案 1 :(得分：2)
:active仅是主动按下链接时的操作，因此如果您点击链接并按住链接而不是放手，则可以清楚地看到它。
为了做到这一点，您需要为打开的页面为a分配一个类。有一些方法可以使用服务器端语言来完成此操作，因此您不必手动执行此操作，但如果您要创建静态.html页面，则需要手动添加类（如{{1每个“活跃”页面的class="active"。
例如：
a将有menu.html和<a href="menu.html" class="active">Menu</a>
<a href="about.html">About</a>将about.html和<a href="menu.html">Menu</a>
答案 2 :(得分：1)
就像每个人都说的那样，你需要为a使用一个单独的课程，:active不会像你想要的那样工作。
但是，如果您使用$ _GET [＆＃39; page_id＆＃39;]值，则可以自动设置该类。像这样：
<li><a <?php if ($_GET['page_id'] == 56) { echo 'class="active" '; } ?>href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
你甚至可以加倍努力，并将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>
答案 3 :(得分：0)
如果以上操作不起作用（对我来说没有），只需根据您所在的页面为导航栏应用不同的颜色。
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;
}
<ul>
<li><b href = "homepage.html">Homepage</a></li>
</ul>
答案 4 :(得分：0)
要扩展@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>
这种方法的主要优点是您的模板在编辑器中更容易阅读，因为html语法突出显示将识别HTML而不仅仅是查看字符串。
我的方法的一个警告是，您需要将php ini配置为允许短标签，否则它将会中断。如果它不起作用，你就无法改变它取代
<?=
带
<?php echo