تغییر رنگ منو ها با کلیک بر روی آنها

[omidparkour]

سلام
من با کد های زیر یه منو طراحی کردم

<center><div id="navcontainer"><ul id="nav"><li><a href="#">صفحه ی اصلی</a></li><li><a href="#">تالار گفتگو</a></li><li><a href="#">آپلود عکس</a></li><li><a href="#">درباره ما</a></li><li><a href="#">تماس با ما</a></li></ul></div></center>
#navcontainer{ margin-top:-16px;
}
#nav li{
list-style:none;
display:inline;
background-color:#017030;
font-size:22px;
color:#FFF;
Border-radius:0px 0px 5px 5px;
}
حالا میخوام که وقتی روی هر کدوم از این منو ها کلیک کرد رنگش عوض بشه
خودم همچین کدی رو با jq نوشتم اما کار نکرد
لطفا راهنمایی کنید
<script src="jq/jquery-1.11.1.min.js"></script><script>
$(document).ready(function() {
$("li").click(function(){
$(this).addClass(nav-click);
});
});
</script>

[2undercover]

1. nav-click رو توی کوتیشن قرار بدید.
2. باید هر بار که رو یکی از گزینه ها کلیک میشه، اون گزینه ای که قبلا فعال بوده رو به حالت اول در بیارید.

[omidparkour]

سلام
من تو کوتیشن قرار دادم اما باز هم نشد

[2undercover]

خوب شما با CSS به اون li که دارای کلاس nav-click هست استایل متفاوتی دادید یا نه، که مشخص بشه روی کدوم کلیک شده؟!

http://codepen.io/2undercover/pen/sxiok

[omidparkour]

من کد های شما رو هم کپی کردم اما باز هم نشد
css های من برای منو اینها هست:
#navcontainer{ margin-top:-16px;
}
#nav li{
padding-right:10px;
list-style:none;
display:inline;
background-color:#017030;
font-size:22px;
color:#FFF;
Border-radius:0px 0px 5px 5px;
transition-duration: 0.2s, 0.2s;
transition: all linear 0.2s;
-o-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
}
#nav li:hover{
list-style:none;
display:inline;
background-color:#02431d;
font-size:22px;
color:#FFF;
Border-radius:0px 0px 5px 5px;
transition-duration: 0.2s, 0.2s;
}
#nav li a{
color:#FFF;
}
.nav-click{
background-color:#02431d;
}

[omidparkour]

درست شد ممنون:قلب::قلب::قلب::قلب::قلب: