关于asp.net中选项卡的点击效果出了有关问题，求教

关于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;

width: 100%;
display: block;
background: green;
text-decoration: none;
text-align: center;
color: #fff;
}

.light1
{
background-color:Black;
}


asp.net js addclass div
[解决办法]

$(function() {
            //默认第一个选项卡添加高亮样式
            $("#navi_pannel>ul>li").click(function() {
                //第一个a标签添加样式其余取出样式
                $(this).attr("class", "light1").siblings().attr("class", "ligth2");
            });
        });

 #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;
            width: 100%;
            display: block;
            text-decoration: none;
            text-align: center;
            color: #fff;
            
        }
        .light1
        {
            background-color: Black;
        }
        .ligth2
        {
            background-color:Green;
        }

<div id="navi_pannel">
        <ul>
            <li class="light1"><a href="#" target="_self">111111</a></li>
            <li class="ligth2"><a href="#" target="_self">222222</a></li>
            <li class="ligth2"><a href="#" target="_self">333333</a></li>
            <li class="ligth2"><a href="#" target="_self">444444</a></li>
            <li class="ligth2"><a href="#" target="_self">555555</a></li>
        </ul>
    </div>