jquery标签切换

HTML代码：

<div id="innerHeaderBottom">
    <ul>
      <li><a id="libiao_a" href="#"><span>标题一</span></a></li>
      <li><a id="libiao_b" href="#"><span>标题二</span></a></li>
      <li><a id="libiao_c" href="#"><span>标题二</span></a></li>
    </ul>
  </div>

css代码：

  #innerHeaderBottom ul li span{ font-size:15px; line-height:28px; font-weight:bold; }
   #libiao_a{ background:url(../images/mainbutton-a-change.png) no-repeat; width:93px; height:28px; display:inline-block; color:#FFF; }
   #libiao_b{ background:url(../images/mainbutton-b.png) no-repeat; width:91px; height:28px; display:inline-block; color:#000;}
   #libiao_c{background:url(../images/mainbutton-c.png) no-repeat; width:93px; height:28px; display:inline-block;color:#000;}

标签的默认样式：

要实现的效果是点击任意一个标签，当前的标签高亮显示，其他则不是。

jquery代码:

 

$(document).ready(function(){

//得到所有标签
   var Lb=$("#innerHeaderBottom ul li a");

//为每一个标签添加click事件
   $.each(Lb,function(index){
      Lb.eq(index).click(
         function(){

         //得到当前标签的background-image，根据它的值改变
           var url=$(this).css("background-image");

        //判断当前的标签是否高亮显示
           if(url.indexOf("change")==-1){

            //不是高亮显示，则设置为高亮显示
              newurl=url.replace(".","-change.");
              $(this).css({"background":newurl,"color":"#FFF"});

           //得到除了当前标签的所有标签
              var node_a=Lb.not($(this));

          //使其他标签都不高亮显示
              $.each(node_a,function(index){
                var na=node_a.eq(index);
                var imgUrl=na.css("background-image");
                imgUrl=imgUrl.replace("-change.",".");
                na.css({"background":imgUrl,"color":"#000"});
              });
              
                }           
         }
           );
   });

最后的效果：

有不当之处，敬请指正。