• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery实现点击导航栏使当前栏目背景变色代码示例

jQuery 程序员 2年前 (2019-03-18) 236次浏览 已收录 0个评论

很多导航菜单为提高辨识度,会在点击的导航栏施加一些特别的样式。

最为常见的是背景变色效果,下面介绍一下如何利用jQuery实现此效果。

代码实例如下:

当前点击的导航栏设置为指定颜色,其他的导航栏目背景色则恢复原样,下面介绍一下它的实现过程。

一.实现原理:

原理非常简单,为每一个li元素注册click事件处理函数,此函数可以为点击的li添加样式类hover,然后将它的兄弟li元素上添加的hover删除,这样就实现了保证只有一个li元素会被设置为特别背景色。


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址