导航条样式转换

CSS样式及切换JS效果切换代码：

    <style type="text/css">
        .list{
            height:40px;
            padding:0px;
            margin:0px;
        }
        .list li{
            list-style-type:none;
            font-size:13px;
            width:90px;
            height:25px;
            line-height:25px;
            diplay:block;
            float:left;
            text-align:center;            
            align:left;
        }
        </style> 

<script type="text/javascript">
$(function(){
     $(".list li").each(function(i){
        $(this).click(function(){            
            if(i==0){
                $("#iframe").attr("src","../XXX/sw.action");
            }else if(i==1){
                $("#iframe").attr("src","../XXX/sf.action");
            }else if(i==2){
                $("#iframe").attr("src","../XXX/sy.action");
            }else if(i==3){
                $("#iframe").attr("src","../XXX/sg.action");
            }else{
                $("#iframe").attr("src","../XXX/sw.action");
            }
        });

    });
//通过鼠标移动事件触发样式切换
 $(".list li").mouseover(function(){
          $(".list li").each(function(){            
    $(this).attr("class","hot_off");
        });
    $(this).attr("class","hot_on");
});  

//通过click事件触发样式切换
/*     $(".list li").click(function(){
        $(".list li").removeClass("hot_on");
        $(this).toggleClass("hot_on");
    },function(){
        $(this).toggleClass("hot_on");
    }); */
});

</script>

 

现有如下导航条：  

<ul  class="list" >    
   <li class="hot_on" id="fy">反应</li>
   <li  id="sl">实例</li>
   <li id="sy">使用</li>
   <li  id="bl">办理</li> 
   <li  id="rcwh">日常</li>    
  </ul>