在導航欄中顯示活動項目

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. 
    }); 
});