Question

js 点击后变换颜色

这是一个页面切换的表格
就是点击表头
表头的背景颜色变为蓝色
点那个就变那个
其他就变回原来的
<script>
window.onload = function() {
var oDiv = document.getElementById("tab");
var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
var timer = null;
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;
oLi[i].onclick = function() {
show(this.index);
}
}
function show(a) {
index = a;
var alpha = 0;
for (var j = 0; j < oLi.length; j++) {
oLi[j].className = "";
aCon[j].className = "";
aCon[j].style.opacity = 0;
aCon[j].style.filter = "alpha(opacity=0)";
}
oLi[index].className = "cur";
clearInterval(timer);
timer = setInterval(function() {
alpha += 2;
alpha > 100 && (alpha = 100);
aCon[index].style.opacity = alpha / 100;
aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
alpha == 100 && clearInterval(timer);
},
5)
}
}
</script>
这个是页面切换的代码

Answer 1

window.onload = function() {
    var oDiv = document.getElementById("tab");
    var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
    var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
    var timer = null;
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].index = i;
        oLi[i].onclick = function() {
            show(this.index);
        }
    }
    function show(a) {
        index = a;
        var alpha = 0;
        for (var j = 0; j < oLi.length; j++) {
            oLi[j].className = "";
            // 加入这句即可
            oLi[index].style.backgroundColor="transparent";
            aCon[j].className = "";
            aCon[j].style.opacity = 0;
            aCon[j].style.filter = "alpha(opacity=0)";
        }
        oLi[index].className = "cur";
        // 加入这句即可
        oLi[index].style.backgroundColor="blue";
        clearInterval(timer);
        timer = setInterval(function() {
            alpha += 2;
            alpha > 100 && (alpha = 100);
            aCon[index].style.opacity = alpha / 100;
            aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
            alpha == 100 && clearInterval(timer);
        }, 5);
    }
}