在导航栏中显示活动项目

Question

我正在构建一个导航栏，并希望高亮显示活动项目（将fontchange改为另一种颜色）。但是现在，默认项目总是突出显示，并且活动项目显示没有差异。

我的HTML代码如下：

<div id='fixedbar'> 
    <div class="container"> 
     <a href="index.html#one"><img style="height:auto; width:auto; max-width:160px; max-height:160px;"src="images/logo-full-white.png"></a> 
     <nav id="fixednav"> 
      <ul> 
       <li class='navitem active'><a href='#home'><span>Home</span></a></li> 
       <li class='navitem'><a href="#work"><span>Portfolio</span></a></li> 
       <li class='navitem'><a href='#'><span>About</span></a></li> 
      </ul> 
     </nav> 
    </div> 
</div> 

CSS：

#fixedbar ul li.active a{ 
    color: #ff9933; 
} 

JS： 在

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

体内

<script> 
    $('#fixednav ul li a').click(function(){ 
    $('a').parent().removeClass('active'); 
    $(this).parent().addClass('active'); 
    });​ 
</script> 

Answer 1

演示：http://jsfiddle.net/abhitalks/CYPL5/1/

您需要针对a不是li以方便。此外，请记住风格:visited，否则将适用于一次点击。

CSS：

.active { 
    color: #ff9933 !important; 
} 

#fixedbar ul li a, #fixedbar ul li a:visited { 
    color: #00f; 
} 

JS：

$('#fixednav ul li a').click(function() { 
    $('#fixednav ul li a').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 2

点击或悬停时有效吗？

如果两者;

的CSS

#fixedbar ul li.active, #fixedbar ul li:hover{ 
    background:black; //do what you want to be 
} 

/* To style just "a" element */ 

#fixedbar ul li.active a, #fixedbar ul li:hover > a{ 
    color:red; //do what you want to be 
} 

的js

$(function(){ 
    $('#fixednav ul li a').click(function(){ 
     $('#fixednav ul').find('li.active').removeClass('active'); 
     $(this).parent().addClass('active'); 

     return false; //return false to aviod scroll top. 
    }); 
});