window.onload=function(){
var oUl=document.getElementById('oUl');
var aLi=oUl.children;
for(var i=0;i<aLi.length;i++){
if(i%2==0){
aLi[i].className='lef_ac';
}else{
aLi[i].className='rig_ac';
}
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
if(i%2==0){
//左边 0 2 4 6 8
if(this.index>=i){
aLi[i].className='lef_on';
}else{
aLi[i].className='lef_ac';
}
}else{
//右边 1 3 5 7 9
if(this.index>=i){
aLi[i].className='rig_on';
}else{
aLi[i].className='rig_ac';
}
}
}
}
}
}
你应该是写复杂了,我理解你意思是,左边和右边加的CSS样式不一样,然后鼠标放在LI上加一个class
$(function() {
var oUl = $('#oUl');
var aLi = $('#oUl li');
aLi.each(function(i){
if (i % 2 == 0) {
$(this).addClass('lef_ac');
} else {
$(this).addClass('rig_ac');
}
});
aLi.hover(unction () {
if ($(this).hasClass('lef_ac')) {
$(this).addClass('lef_on');
} else {
$(this).addClass('rig_on'');
}
}, function () {
$(this).removeClass('lef_on');
$(this).removeClass('rig_on');
});
});
大概是这样,没验证
$(function() {
var oUl = $("#oUl");
var aLi = oUl.children();
aLi.each(function(i, li) {
if (i % 2 === 0) {
$(li).addClass("lef_ac")
.data("index", i)
.on("mouseover", function() {
var index = $(this).data("index");
aLi.filter(":not(:lt(" + index + "))").removeClass("lef_ac").addClass("lef_on");
aLi.fitler(":lt(" + index + ")").removeClass("lef_on").addClass("lef_ac");
});
} else {
$(li).addClass("rig_ac")
.data("index", i)
.on("mouseover", function() {
var index = $(this).data("index");
aLi.filter(":not(:lt(" + index + "))").removeClass("rig_ac").addClass("rig_on");
aLi.fitler(":lt(" + index + ")").removeClass("rig_on").addClass("rig_ac");
});
}
});
});