js导航栏高亮效果

最新推荐文章于 2023-12-08 17:59:50 发布

NOV_JAM

最新推荐文章于 2023-12-08 17:59:50 发布

阅读量449

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/novjam/article/details/101951069

版权

js 专栏收录该内容

1 篇文章

订阅专栏

这是一个使用JavaScript实现导航栏元素高亮显示的函数。通过传入参数，可以设置鼠标悬停和点击时的背景颜色及字体颜色，提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
* 高亮效果函数by novjam
* @param classname 要实现高亮效果的
* @param hoverColor 鼠标悬挂在标签上后标签的颜色
* @param hoverFontColor鼠标悬挂在标签上后标签字体的颜色
* @param strongColor 鼠标点击后标签的颜色
* @param strongFontColor鼠标点击后标签字体的颜色
*/
function changeColor(classname, hoverColor, hoverFontColor, strongColor, strongFontColor) {
var oldC;
var oldFontC;
var beforeClickColor;
var beforeClickFontColor;
function enterChangeColor() {
oldC = $(this).css(“background”);
oldFontC = $(this).css(“color”);
$(this).css({
“background”:hoverColor,
“color”:hoverFontColor,
});
}
function outChangeColor() {
$(this).css({“background”:oldC,
“color”:oldFontC});
}
$(classname).bind(“mouseenter”, enterChangeColor);
$(classname).bind(“mouseleave”, outChangeColor);
var lastSpan;
$(classname).bind(“click”, function() {
$(lastSpan).css({
“background”:beforeClickColor,
“color”:beforeClickFontColor,
});
lastSpan = this;
beforeClickColor = oldC;
beforeClickFontColor = oldFontC;
$(classname).unbind(“mouseleave”);
$(classname).unbind(“mouseenter”);
$(classname).bind(“mouseenter”, enterChangeColor);
$(classname).bind(“mouseleave”, outChangeColor);
$(this).unbind(“mouseleave”);
$(this).unbind(“mouseenter”);
$(this).css({
“background”:strongColor,
“color”:strongFontColor,
});
});
}