使用borderWidth的时候会一动一动的？？？？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
.div_info{text-align:left;}
.span_value{color:red;}
ul li{list-style:none;float:left; border:1px solid #3366cc;margin:3px;padding:3px;cursor:hand;}
ul li:hover{color:#ff3201;}
  </style>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
$(document).ready(function(){
$(".ulprice li").click(function(){
var v = $(this).text();//获取当前所选择的值
$(".span_value").text("\""+v+"\"");//设置当前选择 var index = $(".ulprice li").index($(this));//当前操作DOM
//交替选择
if($(this).css("borderColor") == "#3366cc"){
clearfocus();//限定只能选择一项
$(this).css("border","2px solid #ff3201");
}
else{
$(this).css("border","1px solid #3366cc");
}
}); $(".ulprice li").mouseover(function(){
$(this).css({borderWidth:2});
}); $(".ulprice li").mouseout(function(){
if($(this).css("borderColor") == "#3366cc")
$(this).css({borderWidth:1});
});
function clearfocus(){
$(".ulprice li").each(function(i){
if($(this).css("borderColor") == "#ff3201"){
$(this).css("border","1px solid #3366cc");
}
});
}
});

  //-->
  </SCRIPT>
 </HEAD> <BODY>
<div class="div_info">您已选择：<span class="span_value"></span></div>
<ul class="ulprice">
<li>36.5</li>
<li>38</li>
<li>40</li>
</ul>
 </BODY>
</HTML>borderWidth默认是1,变成2的时候怎么会一动一动的呢，有什么解决办法没

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">
        .div_info{text-align:left;}
        .span_value{color:red;}
        ul li{list-style:none;float:left; border:1px solid #3366cc;margin:3px;padding:3px;cursor:hand;}
        ul li:hover{color:#ff3201;}
      </style>
      <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
      <SCRIPT LANGUAGE="JavaScript">
      <!--
        $(document).ready(function(){
            $(".ulprice li").click(function(){
                var v = $(this).text();//获取当前所选择的值
                $(".span_value").text("\""+v+"\"");//设置当前选择            var index = $(".ulprice li").index($(this));//当前操作DOM
                //交替选择
                if($(this).css("borderColor") == "#3366cc"){
                    clearfocus();//限定只能选择一项
                    $(this).css("border","2px solid #ff3201");
                }
                else{
                    $(this).css("border","1px solid #3366cc");
                }
            });        $(".ulprice li").mouseover(function(){
                $(this).css({borderWidth:2,padding:'2px'});
            });        $(".ulprice li").mouseout(function(){
                if($(this).css("borderColor") == "#3366cc")
                    $(this).css({borderWidth:1,padding:'3px'});
            });
            function clearfocus(){
                $(".ulprice li").each(function(i){
                    if($(this).css("borderColor") == "#ff3201"){
                        $(this).css("border","1px solid #3366cc");
                    }
                });
            }
        });
        
      //-->
      </SCRIPT>
     </HEAD> <BODY>
        <div class="div_info">您已选择：<span class="span_value"></span></div>
        <ul class="ulprice">
            <li>36.5</li>
            <li>38</li>
            <li>40</li>
        </ul>
     </BODY>
    </HTML>