Javascript 使用css和jquery的菜单滑块

$（“.menu-item-5”）.hover（函数（）{
$（“#菜单主菜单hr”）.attr（“类”，“类”）；
$（“#menu main menu hr”）.addClass（'zero'）；
});
$（窗口）。滚动（函数（）{
if（$（“#菜单项-5”）.hasClass（“当前”））{
$（“#菜单主菜单hr”）.attr（“类”，“类”）；
$（“#menu main menu hr”）.addClass（'zero'）；
}
});
//菜单项
$（“.menu-item-6”）.hover（函数（）{
$（“#菜单主菜单hr”）.attr（“类”，“类”）；
$（“#menu main menu hr”）.addClass（“二十五”）；
});
$（窗口）。滚动（函数（）{
if（$（“#菜单项-6”）.hasClass（“当前”））{
$（“#菜单主菜单hr”）.attr（“类”，“类”）；
$（“#menu main menu hr”）.addClass（“二十五”）；
}
});
//菜单项
$（“.menu-item-7”）.hover（函数（）{
$（“#菜单主菜单hr”）.attr（“类”，“类”）；
$（“#菜单主菜单hr”）.addClass（'五十'）；
});
$（窗口）。滚动（函数（）{
if（$（“#菜单项-7”）.hasClass（“当前”））{
$（“#菜单主菜单hr”）.attr（“类”，“类”）；
$（“#菜单主菜单hr”）.addClass（'五十'）；
}
});
//菜单项
$（“.menu-item-8”）.hover（函数（）{
$（“#菜单主菜单hr”）.attr（“类”，“类”）；
$（“#menu main menu hr”）.addClass（‘七十五’）；
});
$（窗口）。滚动（函数（）{
if（$（“#菜单项-8”）.hasClass（“当前”））{
$（“#菜单主菜单hr”）.attr（“类”，“类”）；
$（“#menu main menu hr”）.addClass（‘七十五’）；
}
});
html，正文，.wrapper{
身高：100%；
保证金：0；
}
.包装纸{
背景色：#b61924；
}
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.栏目{
宽度：50%；
身高：100%；
浮动：左；
}
#R列{
背景色：#b61924；
宽度：45%；
溢出：隐藏；
-webkit过渡：颜色0.2s易用；
-moz过渡：颜色0.2s缓进；
}
#L柱{
背景色：#b61924；
宽度：55%；
-webkit过渡：宽度为0.2s，易于插入；
-moz过渡：宽度0.2s缓进；
}
.导航{
边界：0；
位置：绝对位置；
右：0；
宽度：50%；
最小宽度：500px；
保证金：0；
}
导航ul{
列表样式：无；
列表样式图像：无；
填充：0；
}
李国荣先生{
浮动：左；
位置：相对位置；
宽度：25%；
文本对齐：居中；
}
李娜先生{
显示：块；
填充：44px0；
颜色：黑色；
-webkit过渡：颜色0.2s易入易出；
文字装饰：无；
边框底部：1px实心rgba（255、255、255、0）；
}
人力资源{
高度：1px；
宽度：25%；
保证金：0；
位置：绝对位置；
左：0；
底部：0；
背景#f99d33；
边界：无；
转换：.3s易进易出；
文本对齐：左对齐；
}
零小时{
左：0；
}
二十五小时{
左：25%；
}
50小时{
左：50%；
}
七十五小时{
左：75%；
}
#L柱{
身高：100%；
背景图片：url（images/skyline.jpg）；
背景重复：无重复；
背景位置：100%；
背景大小：100%；
}
.徽标包装{
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
高度：自动；
宽度：300px；
左：50%；
利润率：-60px0-150px；
文本对齐：左对齐；
过渡：不透明度。5s缓解1.25s；
}
.logowrap h1{
颜色：#fff；
文本对齐：居中；
字号：2.8em；
}












您的问题是，您的元素有ID，但JavaScript通过类标识符调用它们。将元素更改为具有class属性，或者将JavaScript更改为按id调用它们

我在下面做了前者：

编辑：我将您的主要逻辑转换为jQuery插件。这很容易理解

查看我对您的百分比类名所做的更改。正确的CSS命名约定使用破折号（-）分隔ID和类名中的单词


（函数（$）{
$.fn.onHoverSlide=函数（sliderSelector，类名）{
var$this=这个；
var$slider=$（sliderSelector）；//滑块对象（
）。
$this.hover（函数（）{
$slider.attr（'class'，''）；//清除所有类。
$slider.addClass（className）；//添加当前悬停类。
});
$（窗口）。滚动（函数（）{
if（$this.hasClass（'current'））{
$this.trigger（'hover'）；//重用上面定义的悬停逻辑。
}
});
return$this；//返回self进行链接。
};
})（jQuery）；
$（文档）.ready（函数（$）{
var sliderSelector='#菜单主菜单hr'；
$（'.menu-item-5'）.onHoverSlide（滑块选择器'zero'）；
$（'.menu-item-6'）。onHoverSlide（sliderSelector，“二十五”）；
$（'.menu-item-7'）.onHoverSlide（sliderSelector，'50'）；
$（'.menu-item-8'）。onHoverSlide（sliderSelector，'七十五'）；
});
.nav{
边界：0；
位置：绝对位置；
右：0；
宽度：50%；
最小宽度：500px；
保证金：0；
}
导航ul{
列表样式：无；
列表样式图像：无；
填充：0；
}
李国荣先生{
浮动：左；
位置：相对位置；
宽度：25%；
文本对齐：居中；
}
李娜先生{
显示：块；
填充：44px0；
颜色：黑色；
-webkit过渡：颜色0.2s易入易出；
-moz过渡：颜色0.2s缓进缓出；
-o型过渡：颜色0.2s缓进缓出；
过渡：颜色0.2s，易于输入输出；
文字装饰：无；
边框底部：1px实心rgba（255、255、255、0）；
}
人力资源{
高度：1px；
宽度：25%；
保证金：0；
位置：绝对位置；
左：0；
底部：0；
背景#f99d33；
边界：无；
-webkit转换：0.3s易入易出；
-moz转换：0.3s易入易出；
-o型过渡：0.3s缓进-缓出；
过渡：0.3s缓进缓出；
 <li id="menu-item-5">

$(".menu-item-5").hover(function() {

 $("#menu-item-5").hover(function() {