给一个控件添加className，里面的色彩显示无效
日期：2014-05-16 浏览次数：20487 次
给一个控件添加className，里面的颜色显示无效
给一个控件添加className，里面的颜色显示无效，不知道是不是跟优先级有关，因为我要覆盖原来设置的颜色，下面是代码，颜色值为#ffb442，不知道效果的可以改为white，但颜色根本没变，知道原因的说一下，知道解决方法的恳请指教。谢谢。
由于图片上传不了，只要创建一个文件夹images即可，图片显示不了也无所谓，我要的效果是点击右下角的1，2，3，4，5时，颜色li按钮的颜色会改变(原意是变深).
CSS：
html代码：
给一个控件添加className，里面的颜色显示无效，不知道是不是跟优先级有关，因为我要覆盖原来设置的颜色，下面是代码，颜色值为#ffb442，不知道效果的可以改为white，但颜色根本没变，知道原因的说一下，知道解决方法的恳请指教。谢谢。
由于图片上传不了，只要创建一个文件夹images即可，图片显示不了也无所谓，我要的效果是点击右下角的1，2，3，4，5时，颜色li按钮的颜色会改变(原意是变深).
CSS：
/* CSS Document */
* { margin:0; padding:0;}
body { background:#ecfaff;}
#main { position:relative; margin:200px auto 0; width:470px; height:150px; overflow:hidden;}
#main #big_pic { width:470px; height:150px; list-style:none;}
#main #big_pic li {width:470px; height:150px; position:absolute; overflow:hidden;}
#main #big_pic li a {width:470px; height:150px;}
#main #big_pic li a img {width:470px; height:150px; border:0;}
#main #big_pic li a:link { text-decoration:none;}
#main #pic_page { width:124px; height:23px; list-style:none; position:absolute; bottom:10px; right:10px; z-index:2000;}
.active { padding:2px 2px; font-weight:bold; color:#ffffff; background:#ffb442; position:relative; bottom: 2px; }
#main #pic_page li { width:19px; height:20px; float:left; border:1px solid #f47500; color:#d94b01; background:#fcf2cf; text-align:center; margin-right:3px;}
#main #pic_page li a { color:#f47500;}
#main #pic_page li a:link { text-decoration:none;}
html代码：
<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="common.js"></script>
<script>
window.onload=function() {
var oDiv=document.getElementById('main');
var oUlBigPic=document.getElementById('big_pic');
var oUlPicPage=document.getElementById('pic_page');
var aLiBigPic=oUlBigPic.getElementsByTagName('li');
var aBtnPicPage=oUlPicPage.getElementsByTagName('li');
var current=0;
var currentZIndex=2;
//alert(aBtnPicPage.length);
for (var i=0;i<aBtnPicPage.length;i++) {
aBtnPicPage[i].index=i;
aBtnPicPage[i].onclick=function() {
if (current!=this.index) {
current=this.index;
for (var j=0;j<aBtnPicPage.length;j++) {
aBtnPicPage[j].className='';
}
aBtnPicPage[current].className='active';
aLiBigPic[current].style.height=0;
aLiBigPic[current].style.zIndex=currentZIndex++;
startMove(aLiBigPic[current], {height:150});
} else {
}
};
}
};
</script>
</head>
<body>
<div id="main">
<ul id="big_pic">
<li style="z-index:1;"><a href="javascript:;"><img src="images/1.jpg" /></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" /></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" /></a></li>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
