jquery实现点击导航栏变色

男娘i 2022-04-25 06:16 418阅读 0赞

## ***效果如下***  ##

![20190506115333967.gif][]

## ***思路：*** ##

**1、在css里面设置两个class**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

**2、默认导航栏的字体颜色是noneclick**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

**3、js代码**

<script>
      $('#menu li a span').click(function () {
        var f = this;
        $('#menu li a span').each(function () {
          this.className = this == f ? 'click' : 'noneclick'
        });
      });
    </script>

[20190506115333967.gif]: /images/20220205/3e3c4d7886f440ee9cca14938831fb9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220205/6e391465717f4b8cba425d4fb8d80f70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220205/f1be166b122541efb3cd0fe80360d605.png

发表评论取消回复

表情：

评论列表（有 0 条评论，418人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 导航栏自定义按钮点击事件

![在这里插入图片描述][20210121210833617.png_pic_center] pages.json { "path": "pages/t

àì夳堔傛蜴生んèń/ 2023年01月09日 15:36/ 0 赞/ 317 阅读

相关 jQuery实现垂直折叠导航栏

实现思路本垂直折叠导航栏主要通过css实现简单的菜单样式布局，将第二菜单通过display：none；隐藏起来，再通过jQuery给第第二菜单ul标签设置slideTo

迈不过友情╰/ 2022年11月29日 05:40/ 0 赞/ 284 阅读

相关 flutter导航栏点击无效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2

小灰灰/ 2022年11月29日 03:07/ 0 赞/ 216 阅读

相关微信小程序 - 点击导航栏标签切换变色（导航栏当前hover样式）

效果图 ![在这里插入图片描述][202008171850293.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index` 对应

迈不过友情╰/ 2022年11月28日 13:24/ 0 赞/ 411 阅读

相关 Vue - 点击导航栏当前标签后变色功能（导航栏当前hover样式）

效果图 ![在这里插入图片描述][20200817173617973.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index`

心已赠人/ 2022年11月28日 13:19/ 0 赞/ 496 阅读

相关 jquery 实现导航栏滑动效果

原文：[http://www.cnblogs.com/WebMobile/p/3926921.html][http_www.cnblogs.com_WebMobile_p_39

向右看齐/ 2022年08月11日 06:28/ 0 赞/ 276 阅读

相关利用JQuery实现顶部导航栏功能

今天给大家介绍一下，如何利用JQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。下面举个例子具体介绍一下如何这些功能，案例如下：

落日映苍穹つ/ 2022年07月16日 11:40/ 0 赞/ 362 阅读

相关 JAVASCRIPT之导航栏鼠标点击变色特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

左手的ㄟ右手/ 2022年07月12日 02:46/ 0 赞/ 182 阅读

相关 JAVASCRIPT之导航栏鼠标点击变色特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

不念不忘少年蓝@/ 2022年07月12日 02:46/ 0 赞/ 216 阅读

相关 jquery实现点击导航栏变色

效果如下 ![20190506115333967.gif][] 思路： 1、在css里面设置两个class ![watermark_type_ZmFuZ3po

男娘i/ 2022年04月25日 06:16/ 0 赞/ 419 阅读