jquery - Change current list element on link click using JavaScript -

i'm trying change current tab on link click. have this:

so when click on next or previous link want change active tab. guess can done in javascript, since i'm complete beginner, can preform easiest tasks.

this html used building part of page:

<div class="grey-box-wrap">     <div class="top">         <a href="javascript:;" class="prev"><i></i>previous week</a>         <span class="center">february 04 - february 10, 2013 (week 6)</span>         <a href="javascript:;" class="next">next week<i></i></a>     </div>     <div class="bottom">         <ul class="days">             <li>                 <a href="javascript:;">                     <b>feb 04</b>                     <!-- <i>7.5</i> -->                     <span>monday</span>                 </a>             </li>             <li>                 <a href="javascript:;">                     <b>feb 06</b>                     <!-- <i>7.5</i> -->                     <span>tuesday</span>                 </a>             </li>             <li>                 <a href="javascript:;">                     <b>feb 06</b>                     <!-- <i>7.5</i> -->                     <span>wednesday</span>                 </a>             </li>             <li class="active">                 <a href="javascript:;">                     <b>feb 07</b>                     <!-- <i>7.5</i> -->                     <span>thursday</span>                 </a>             </li>             <li>                 <a href="javascript:;">                     <b>feb 08</b>                     <!-- <i>7.5</i> -->                     <span>friday</span>                 </a>             </li>             <li>                 <a href="javascript:;">                     <b>feb 09</b>                     <!-- <i>0.0</i> -->                     <span>saturday</span>                 </a>             </li>             <li class="last">                 <a href="javascript:;">                     <b>feb 10</b>                     <!-- <i>0.0</i> -->                     <span>sunday</span>                 </a>             </li>         </ul>     </div> </div> <div class="row-wrapper"> 

this css:

.grey-box-wrap .bottom .days li.active a, .grey-box-wrap .bottom .days li:hover { color: white; }  .grey-box-wrap .bottom .days li { color: #666666; }  .grey-box-wrap .top { height: 40px; line-height: 40px; padding: 0 10px; overflow: hidden; border-bottom: 1px solid white; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  .grey-box-wrap .top .prev { float: left; }  .grey-box-wrap .top .next { float: right; text-align: right; }  .grey-box-wrap .top .prev, .grey-box-wrap .top .next { width: 25%; color: #f1592a; display: inline-block; font-weight: bold; }  .grey-box-wrap .bottom .days li.active, .grey-box-wrap .bottom .days li:hover { border: solid 1px #f1592a; }  .grey-box-wrap .bottom .days li { float: left; margin-right: 2px; width: 99px; padding: 5px; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; -o-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; border: 1px solid #bdbdbd; border-bottom: none; background: white; } 

and attempt list elements in js:

can me this, or give me suggestion on what's easiest or best way preform kind of task? thanks!

there many ways complete this. i've tried keep simple possible , have added comments can understand each line.

try jquery:

$(document).ready(function() { // check document ready     $('li a').click(function() { // catch click on list link         $('li').removeclass('active'); // remove current instances of active         $(this).parent().addclass('active'); // add class active item clicked     }); }); 

you can view example here: http://jsfiddle.net/dbr8dxmu/