关于asp.net中选项卡的点击效果出了问题，求教
预期效果为：
第一个选项卡默认为黑色，其它选项卡为绿色，点击其它选项卡时，第一个选项卡变回成绿色。
出现的问题：预期效果未能实现。

相关的代码如下，不知是哪里出了问题。

//////////////////////
前台有如下代码：
 <div id="navi_pannel">
            <ul>
                <li><a class="item1" href="#" target="_self">111111</a></li>
                <li><a class="item2" href="#" target="_self">222222</a></li>
                <li><a class="item3" href="#" target="_self">333333</a></li>
                <li><a class="item4" href="#" target="_self">444444</a></li>
                <li><a class="item5" href="#" target="_self">555555</a></li>
            </ul>
            </div>

///////////////////////
在JS文档里写了：

        $(function(){
            //默认第一个选项卡添加高亮样式
            $(".item1").addClass("light1");
            $(".item2").click(function(){
                  //第一个a标签添加样式其余取出样式
                 $(".item2").addClass("light1");
                 $(".item1,.item3,.item4,.item5").removeClass("light1");
            });
});

////////////////////////////////
在相关的CSS文件中做了如下的样式设置：
(注：因为其它页面也有ul和li，以下对ul和li的设置仅限是在id=” navi_pannel”中的DIV有效)

#navi_pannel ul
{
list-style: none;
width: 500px;
margin: 0px auto;
padding-left: 5px;
height: 20px;
}
#navi_pannel li
{
float: left;
width: 85px;
height: 20px;
line-height: 20px;
margin-right: 6px;
}
#navi_pannel li a
{
position: relative;