为什么我的导航菜单不工作？

Question

在我的导航栏中，我希望能够点击一个导航链接，并在您转到页面时让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> 

Answer 1

:active只有当链接积极压的动作，这样你就可以清楚地看到它，如果你点击链接并按住它，而不是放开。

为了做到这一点，您需要为打开的页面分配一个类到a。有一些方法可以用服务器端语言完成，因此您不必手动完成此操作，但是如果要创建静态.html页面，则需要手动向a中的每个类（如class="active"）添加一个类“活跃”页面。

因此，例如：

menu.html将有<a href="menu.html" class="active">Menu</a>和<a href="about.html">About</a>

而about.html将有<a href="menu.html">Menu</a>和<a href="about.html" class="active">About</a>

Answer 2

你误会了:active手段。

您的网络浏览器没有概念，其中li在页面上代表当前页面，除非你以某种方式告诉它。

活动选择器选择活动链接。也就是说，您使用键盘导航选择的链接（但尚未遵循）或您刚刚单击的链接（新页面加载之前）。一旦新的页面加载，没有任何链接再次激活。

因此，您只能在a元素上使用:active，而不是您在此处尝试执行的操作。

相反，你想一个类添加到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; 
} 

Answer 3

正如大家都说，你需要使用一个单独的类，:active不会像你想要的那样工作。

但是，如果您使用$ _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> 

你甚至可以去额外英里，并有在PHP文件的顶部存储在数组中的page_id。并做一个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> 

Answer 4

如果上述不起作用（它不适用于我），只需在导航栏上应用不同的颜色，具体取决于您所在的页面。

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> 

Answer 5

要扩展什么@Aister贴我不会对HTML回声使用，但

<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