單頁動態內容替換網站 - 如何單獨突出顯示當前內容鏈接？

Question

我有一個單一的網頁網站，當我點擊菜單的內容被替換通過jQuery。雖然這些項目沒有鏈接到不同的頁面，只是不同的div，我想讓菜單像普通網站菜單一樣活動3種狀態：非活動，懸停和「當前內容」（如當前/活動頁面，但它贏了實際上鍊接到另一個頁面）。

我希望每個單獨的鏈接匹配它的懸停顏色，當點擊並在它的'當前內容'狀態。 （現在我只有一個可以將任何「當前」鏈接變成紅色的jquery塊......如果可能，我想要更多的控件）我希望這是有道理的......下面的代碼！

HTML

<div id="sidebar"> 
    <nav> 
    <ul id="nav"> 
     <li id="home"><a id="showdiv1">Home</a></li> 
     <li id="about"><a id="showdiv2">About</a></li> 
     <li id="demoReel"><a id="showdiv3">Demo Reel</a></li> 
     <li id="contact"><a id="showdiv4">Contact</a></li> 
    </ul><!-- /#nav --> 
    </nav> 
</div><!-- /#sidebar --> 

<div id="content"> 
     <div id="div1">Blah blah!</div> 
     <div id="div2" style="display:none;">Blardy blah!</div> 
     <div id="div3" style="display:none;">Moo!</div> 
     <div id="div4" style="display:none;">Shmeee!</div> 
</div><!-- /#content --> 

CSS

#sidebar { 
float:right; 
width:30%; 
} 

    ul#nav li#home a:hover { color:red;} 

    ul#nav li#about a:hover { color:green; } 

    ul#nav li#demoReel a:hover { color:blue; } 

    ul#nav li#contact a:hover { color:yellow; } 

    .active a { color:red; } 

#content { 
    float:left; 
    width:60%; 
} 

jQuery的

$(function() { 

//Highlight active navigation link 
$("ul").delegate("li", "click", function() { 
    $(this).addClass("active").siblings().removeClass("active"); 
}); 


//Fade-in/hide selected navigation link 
$('#showdiv1').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div1').fadeIn(); 
}); 
$('#showdiv2').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div2').fadeIn(); 
}); 

$('#showdiv3').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div3').fadeIn(); 
}); 

$('#showdiv4').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div4').fadeIn(); 
}); 

}) 

我想指出，我是很新的東西，完全是自學的，所以請原諒的錯誤。更重要的是，非常感謝您的幫助！

Answer 1

而不是僅僅

.active a { color:red; } 

嘗試

ul#nav li#home a:hover, ul#nav li#home.active a { color:red;} 
ul#nav li#about a:hover, ul#nav li#about.active a { color:green; } 
ul#nav li#demoReel a:hover, ul#nav li#demoReel.active a { color:blue; } 
ul#nav li#contact a:hover, ul#nav li#contact.active a { color:yellow; } 

更換

ul#nav li#home a:hover { color:red;} 
ul#nav li#about a:hover { color:green; } 
ul#nav li#demoReel a:hover { color:blue; } 
ul#nav li#contact a:hover { color:yellow; } 

這樣，每個環節獲得其特殊的顏色，當它盤旋或時，其父是「活性」。