更改導航菜單鏈接的顏色

Question

因此，問題是當我第一次訪問我的網站時，這3個鏈接是藍色的，點擊任何一個鏈接後，它們變成橙色，最後一次點擊的鏈接保持較暗/紅色以便導航。當你點擊任何一個鏈接後，當你進入頁面時，我希望它默認爲橙色。

<ul class="nav" > 
    <li><a href="champions.php">Champions</a></li> 
    <li><a href="items.php">Items</a></li> 
    <li><a href="changes.php">Changes</a></li> 
    </ul> 

CSS部分：

.nav { 
    float: right; 
    margin: 0; 
    padding: 0; 
    list-style: none; 

    } 

.nav li:hover{ 
    background: #cccccc; 
} 
.nav li{ 

    background: a0a0a0; 
    padding: 2px; 
    display:inline-block; 
    margin-right: 5px; 
    position: relative; 
    box-shadow: 
    1px 1px #cccccc, 
    2px 2px #cccccc, 
    3px 3px #cccccc; 
    transition: all 0.1s ease-in; 

} 
.nav li:active{ 

box-shadow: none; 
    top: 3px; 
    left: 3px; 
} 
.nav li a{ 

    text-decoration: none; 
    } 
.nav li a:hover{ color:orange; } 

和jQuery

$(document).ready(function() { 

    var hash = window.location.hash.substr(1); 
    var href = $('.nav li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-4)){ 
      var toLoad = hash+'.php #content'; 
      $('#content').load(toLoad) 
     }           
    }); 

    $('.nav li a').click(function(){ 

     var toLoad = $(this).attr('href')+' #content'; 
     $('#content').hide('fast',loadContent); 
     $('#load').remove(); 

     $('#load').fadeIn('normal'); 
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); 
     function loadContent() { 
      $('#content').load(toLoad,'',showNewContent()) 
     } 
     function showNewContent() { 
      $('#content').show('normal',hideLoader()); 
     } 
     function hideLoader() { 
      $('#load').fadeOut('normal'); 
     } 

     $('.nav li a').addClass("undnone"); 
     $(this).removeClass("undnone").addClass("und"); 
     return false; 


    }); 

}); 

多一點的CSS（從jquery的）

.und 
{ 
    color: red; 
    text-decoration: none;` 
`} 
.undnone{ 
    color: #fc7425; 
    text-decoration: none; 
} 

Answer 1

變化

.nav li a{ 

text-decoration: none; 
} 

到

.nav li a{ 

text-decoration: none; 
color:orange; 
} 

這裏是一個example

Answer 2

也許我沒有完全理解的問題，但如果你不想藍色的鏈接，而要改用橙色，只需設置在a顏色以橙色，像這樣：

.nav li a { 
color: orange; 
text-decoration: none; 
} 

爲了讓jQuery的覆蓋橙色，更改.und的CSS來：

.und { 
color: red!important; 
} 

Answer 3

所有你想要的是被默認橙色的鏈接元素，那麼你將不得不

color:orange; 

從

.nav li a: hover { } 

移動屬性到

.nav li a { } 

S O，類應爲：

.nav li a { 
    text-decoration: none; 
    color:orange; 
} 

你可以看到這裏 - >http://jsfiddle.net/79sZL/

UPDATE：

如果你想有一個鏈接保持 '活躍' 一旦其點擊並保持因此，直到另一個鏈接被點擊（redering此爲「無效」），那麼你可以做這樣的jQuery：

$(document).ready(function() { 
    $('.nav li a').click(function (event) { 
     $('.nav li a').removeClass('red'); 
     $(event.target).addClass("red"); 
    }); 
}); 

見this->http://jsfiddle.net/79sZL/2/

希望這有助於！