how to control tabs current effect using javascript

I have html form which contains a tab menu the code is

<ul id="menu">
    <li><a href="f?p=&APP_ID.:1:&SESSION.:" class="active">Home</a></li>
    <li>
        <a href="f?p=&APP_ID.:400:&SESSION.:" class="current">Leave Eligibility</a>

    </li>
    <li><a href="f?p=&APP_ID.:450:&SESSION.:" class="current2">Apply Leave</a></li>
    <li><a href="f?p=&APP_ID.:300:&SESSION.:" class="current3">Change Password</a></li>
    <li><a href="f?p=&APP_ID.:11:&SESSION.:" class="current4">Applied Leaves</a></li>
        <li><a href="f?p=&APP_ID.:25:&SESSION.:" class="current4">Holidays</a></li>
        <li><a href="f?p=&APP_ID.:445:&SESSION.:" class="current4">Contact</a></li>
</ul>

and the css of this html is

#menu{

    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
    color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
    color: #fafafa;
}

#menu li:hover > ul{
    display: block;
}

/* Sub-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
    height: 10px;
    width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
ul#menu li a.active{
        color: #fafafa;
    }

So by default home tab is hovered when the page loaded. When i will click leave eligibility tab the hover effect of home tab will be disabled and the leave eligibility tab will be hovered. I want to use javascript/jquery to control it. So anyone please tell me how to do it.

Answers


if you are using notepad then try with the code segments.

on your home page the design should be like this

    <li><a href="f?p=&APP_ID.:1:&SESSION.:" class="active">Home</a></li>
    <li>
        <a href="f?p=&APP_ID.:400:&SESSION.:" class="current">Leave Eligibility</a>

    </li>

On your Leave Eligibilty page

 <li><a href="f?p=&APP_ID.:1:&SESSION.:" class="current">Home</a></li>
    <li>
        <a href="f?p=&APP_ID.:400:&SESSION.:" class="active">Leave Eligibility</a>

    </li>

and so on for other pages.

i put it for your quick reference...

Try this

$("a").live('click', function() {
  $("a").removeClass("active");
  $(this).addClass("active");
  return false;
});

Check the output here http://jsfiddle.net/Hn54A/3/


Need Your Help

Beaglebone black - Debian 4.1 - PRU - prussdrv_open() failed with -1

linux debian beagleboneblack

I am running the example as root http://mythopoeic.org/BBB-PRU/pru-helloworld/example.c