js中控制border-bottom-color属性？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{margin: 0px;padding: 0px;}
body{
font-size:12px;
}
#id0 {
width: 300px;
margin: 5px auto;
}
#id0 ul{
overflow: auto;
height: 100%;
}
#id0 li{
float: left;
position: relative;
top: 1px;
list-style: none;
margin-right: 5px;
}
#id0 li a{
line-height: 20px;
display: block;
height: 20px;
width: 80px;
text-align: center;
border: 1px solid #FF0000;
}
#id0 li a:hover{
font-weight: bold;
border-bottom-color: #FFFFFF;
}
#id1,#id2 {
height: 50px;
border: 1px solid #FF0000;
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="id0">
  <ul>
    <li><a href="#" onclick="hello(0)">标签1</a></li>
    <li><a href="#" onclick="hello(1)">标签2</a></li>
  </ul>
  <div id="id1">此处显示新 Div 标签的内容1</div>
  <div id="id2" style="display:none"><a href="#">此处显示新 Div 标签的内容2</a></div>
</div>
<script type="text/javascript">
<!--
function hello(num){
var x = document.getElementById("id0");
var taga = x.getElementsByTagName("a");
var div = x.getElementsByTagName("div");

for(var i=0;i<taga.length;i++){
if(i == num){
//alert("haha");
taga[i].style.border-bottom-color = "#fff" ;/*这句和下边else里的同样功能的语句中，下边线颜色属性不起作用，都换成其它属性便没问题，比如改控制字体颜色属性taga[i].style.color = "#fff" ;*/
div[i].style.display = "block";
}
else{
taga[i].style.border-bottom-color = "#f00" ;
div[i].style.display = "none";
}
}
}
//-->
</script>
</body>
</html>
上段js代码为什么不起作用？？问题写在有问题的代码后边儿

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>无标题文档 </title> 
    <style type="text/css"> 
    <!-- 
    *{margin: 0px;padding: 0px;} 
    body{ 
    font-size:12px; 
    } 
    #id0 { 
    width: 300px; 
    margin: 5px auto; 
    } 
    #id0 ul{ 
    overflow: auto; 
    height: 100%; 
    } 
    #id0 li{ 
    float: left; 
    position: relative; 
    top: 1px; 
    list-style: none; 
    margin-right: 5px; 
    } 
    #id0 li a{ 
    line-height: 20px; 
    display: block; 
    height: 20px; 
    width: 80px; 
    text-align: center; 
    border: 1px solid #FF0000; 
    } 
    #id0 li a:hover{ 
    font-weight: bold; 
    border-bottom-color: #FFFFFF; 
    } 
    #id1,#id2 { 
    height: 50px; 
    border: 1px solid #FF0000; 
    padding: 5px; 
    } 
    --> 
    </style> 
    </head> 
    <body> 
    <div id="id0"> 
      <ul> 
        <li> <a href="#" onclick="hello(0)">标签1 </a> </li> 
        <li> <a href="#" onclick="hello(1)">标签2 </a> </li> 
      </ul> 
      <div id="id1">此处显示新 Div 标签的内容1 </div> 
      <div id="id2" style="display:none"> <a href="#">此处显示新 Div 标签的内容2 </a> </div> 
    </div> 
    <script type="text/javascript"> 
    <!-- 
    function hello(num){ 
    var x = document.getElementById("id0"); 
    var taga = x.getElementsByTagName("a"); 
    var div = x.getElementsByTagName("div"); for(var i=0;i <taga.length;i++){ 
    if(i == num){ 
    //alert("haha"); 
    taga[i].style.borderBottomColor = "#fff" ;//记住，凡是在CSS里用连接的在JS里用大写，比如padding-top在JS里就是paddingTop
    div[i].style.display = "block"; 
    } 
    else{ 
    taga[i].style.borderBottomColor = "#f00" ; 
    div[1].style.display = "none"; 
    } 
    } 
    } 
    //--> 
    </script> 
    </body> 
    </html> 
      

  2.   


    更正一下代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>无标题文档 </title> 
    <style type="text/css"> 
    <!-- 
    *{margin: 0px;padding: 0px;} 
    body{ 
    font-size:12px; 
    } 
    #id0 { 
    width: 300px; 
    margin: 5px auto; 
    } 
    #id0 ul{ 
    overflow: auto; 
    height: 100%; 
    } 
    #id0 li{ 
    float: left; 
    position: relative; 
    top: 1px; 
    list-style: none; 
    margin-right: 5px; 
    } 
    #id0 li a{ 
    line-height: 20px; 
    display: block; 
    height: 20px; 
    width: 80px; 
    text-align: center; 
    border: 1px solid #FF0000; 
    } 
    #id0 li a:hover{ 
    font-weight: bold; 
    border-bottom-color: #FFFFFF; 
    } 
    #id1,#id2 { 
    height: 50px; 
    border: 1px solid #FF0000; 
    padding: 5px; 
    } 
    --> 
    </style> 
    </head> 
    <body> 
    <div id="id0"> 
      <ul> 
        <li> <a href="#" onclick="hello(0)">标签1 </a> </li> 
        <li> <a href="#" onclick="hello(1)">标签2 </a> </li> 
      </ul> 
      <div id="id1">此处显示新 Div 标签的内容1 </div> 
      <div id="id2" style="display:none"> <a href="#">此处显示新 Div 标签的内容2 </a> </div> 
    </div> 
    <script type="text/javascript"> 
    <!-- 
    function hello(num){ 
    var x = document.getElementById("id0"); 
    var taga = x.getElementsByTagName("a"); 
    var div = x.getElementsByTagName("div"); for(var i=0;i <taga.length;i++){ 
    if(i == num){ 
    //alert("haha"); 
    taga[i].style.borderBottomColor = "#fff" ;//记住，凡是在CSS里用连接的在JS里用大写，比如padding-top在JS里就是paddingTop
    div[i].style.display = "block"; 
    } 
    else{ 
    taga[i].style.borderBottomColor = "#f00" ; 
    div[i].style.display = "none"; 
    } 
    } 
    } 
    //--> 
    </script> 
    </body> 
    </html> 
      

  3.   

    脚本有报错是因为taga = x.getElementsByTagName("a"); 下面有3个链接，而x.getElementsByTagName("div"); 只有2个DIV所以报错，解决办法是去掉最后一个链接标签
      

  4.   

    关于这段代码，css控制时，为什么不论把<ul><li><a>中的z-index设为多少，在ff里都不能产生和IE6一样的效果？在FF里如何做出如IE6那样儿的效果呢？？请教了。
      

  5.   

    border-bottom-color应该写为：borderBottomColor试试