تغییر رنگ گزینه منو تا زمانیکه گزینه دیگر کلیک شود

با سلام

من در سایت با <ul> و <li> و<a> منویی ایجاد کردم.حالا می خوام وقتی کاربر بر روی یکی از لینک ها کلیک می کنه بک گراند و یا رنگ لینک مثلا قرمز شود و تا زمانیکه کاربر بر روی لینک دیگری کلیک نکرده این رنگ قرمز باقی بماند . زمانیکه کاربر بر روی لینک دیگری کلیک کرد لینک قبلی به رنگ پیش فرض در آید و لینک جدید قرمز شود. در ولقع می خوام مشخص شود که کدام لینک کلیک شده است.

   <li id="resturan" ><pre><a class="glidebutton" href="/">  رستوران و کافی شاپ</a></pre></li>                      <li id="tafrihi"><pre><a class="glidebutton" href="/">  تفریحی و ورزشی</a></pre></li>

                       <li id="arayeshi" ><pre><a class="glidebutton" href="/">  آرایشی و بهداشتی</a></pre></li>

                        <li id="honari"><pre><a class="glidebutton" href="/">  فرهنگی و هنری</a></pre></li>

                     <li id="kala"><pre><a class="glidebutton" href="/">  کالا</a></pre></li>

                  <li id="kudak"><pre><a class="glidebutton" href="/">  کودک و نوجوان  </a></pre></li>

                 

در مورد hover یه جستجو بزن خیلی سادست

یه نمونه که تو سایت ارتمیس انجام دادم رو برات گذاشتم بر اساس میلت رنگشو تغییر بده

    <div align="center" class="menu">

    

        <div  style="width: 100%">

    

          

                            <div class="menu">

                            



  <li><a href="default.aspx">صفحه اصلی</a></li>

    <li><a href="news.aspx">اخبار و اطلاعیه</a></li>

    <li><a href="sale.aspx">تصاویر</a></li>

کد css

.menu {    



    height: 40px;



   



    direction:rtl;



    background: #4c4e5a;



    background: -webkit-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);



    background: -moz-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);



    background: -o-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);



    background: -ms-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);



    background: linear-gradient(top,#D8E3F6 0%,#2c4d10 100%);







    -webkit-border-radius: 5px;



    -moz-border-radius: 5px;



    border-radius: 5px;



}



.menu li {



    position: relative;



    list-style: none;



    float: right;



    display: block;



    height: 40px;

   



}



.menu li a {



    display: block;



    padding: 0 14px;



    margin: 6px 0;



    line-height: 28px;



    text-decoration: none;







    border-left: 1px solid #393942;



    border-right: 1px solid #4f5058;







    font-family: Tahoma, Arial, sans-serif;



    font-weight: normal;



    font-size: 12px;







    color: #f3f3f3;



    text-shadow: 1px 1px 1px rgba(0,0,0,.6);







    -webkit-transition: color .2s ease-in-out;



    -moz-transition: color .2s ease-in-out;



    -o-transition: color .2s ease-in-out;



    -ms-transition: color .2s ease-in-out;



    transition: color .2s ease-in-out;



}







.menu li:first-child a { border-left: none; }



.menu li:last-child a{ border-right: none; }







.menu li:hover > a { color: yellow; }



  .menu ul {



    position: absolute;



    top: 40px;



    right: 0;



    opacity: 0;



    background: #1f2024;



    -webkit-border-radius: 0 0 5px 5px;



    -moz-border-radius: 0 0 5px 5px;



    border-radius: 0 0 5px 5px;



    -webkit-transition: opacity .25s ease .1s;



    -moz-transition: opacity .25s ease .1s;



    -o-transition: opacity .25s ease .1s;



    -ms-transition: opacity .25s ease .1s;



    transition: opacity .25s ease .1s;



}







.menu li:hover > ul { opacity: 1; }







.menu ul li {



    height: 0;



    overflow: hidden;



    padding: 0;



    -webkit-transition: height .25s ease .1s;



    -moz-transition: height .25s ease .1s;



    -o-transition: height .25s ease .1s;



    -ms-transition: height .25s ease .1s;



    transition: height .25s ease .1s;



}







.menu li:hover > ul li {



    height: 36px;



    overflow: visible;



    padding: 0;



    direction:rtl;



}





 .menu ul li a {



    width: 100px;



    padding: 4px 30px 4px 0;



    margin: 0;



    border: none;



    border-bottom: 1px solid #353539;



}







.menu ul li:last-child a { border: none; }

سلام
ممنون از وقتی که گذاشتی ولی منظور من اصلا این نبود. من می خوام بعد از اینکه روی یکی از لنک ها کلیک شد اون لینک تا زمانیکه صفحه مربوط بهش باز هست و لینک دیگه ای کلیک نشده مثلا رنگش سبز باقی بمونه (یعنی همه لینک ها فرضا آبی لینکی که کلیک شده سبز) و بعد از کلیک شدن روی یک لینک دیگه که ممکنه 2 ساعت بعد کلیک بشه باز همه لینک ها فرضا آبی لینکی که کلیک شده سبز و بهمین ترتیب.

شما میتونید با جی کوئری این کار رو انجام بدید بدین صورت که یه کلاس css تعریف کنید که مثلا دکمه مورد مورد نظر بعد از کلیک کردن سبز شود سپس با جئ کوئری هر لینکی که صدا زده میشه این کلاس css بدان افزوده شود و از لینک دیگر این کلاس حذف شود

شما می تونید با دستورات css این کار را انجام بدهید
1-Visited 2-active

سلام جناب kavayo
ممکنه یه نمونه کد برام بذارید لطفا