JS怎么实现点击目录名变换颜色的效果

本篇内容主要讲解“JS怎么实现点击目录名变换颜色的效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JS怎么实现点击目录名变换颜色的效果”吧!

成都创新互联主要从事成都做网站、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务蔚县,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

很喜欢一些特效，更喜欢一些企业站的导航点击效果，但是无论自己怎么使用点击效果都是不怎么理想，于是跟这个效果杠上了，最后通过学习JS相关的变幻效果，最后实现了企业站导航栏点击目录名变换颜色的效果实例，下面来分享我的操作代码：

首先我先将我的最终效果展示让大家瞧一瞧：

如上图所示，我们需要实现的效果是当用户点击相应的导航栏的时候，我们可以让相应的导航栏名变换颜色，以提醒用户此刻所处的页面。

下面我就展示一下实现上述碰撞效果的Html和JS代码：

首先来展示一下前端的HTML代码：

   

       
首页
            
产品展示
            
关于我们
            
新闻资讯
            
视频中心
            
联系我们
        
    

然后我们来展示一下JS代码：

    $(function () {
        var url = decodeURI(location.pathname+location.search);
        $(".location").each(function () {
            if ($(this).attr('href') == url)
            {
                $(this).addClass('now')
            }else {
                $(this).removeClass('now')
            }
        })
    })

3.代码解析：

前端页面：

类名为location now的元素为变换后颜色的标签。

JS代码：

decodeURI():可对 encodeURI() 函数编码过的 URI 进行解码。

location.pathname：得到的结果时浏览器地址栏中的完整地址串。

location.search：得到的是URL路径中?以及?之后的所有内容。

实例解析：

访问的URL路径为：

http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password

location.pathname得到的结果为：

http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password

location.search得到的结果为：

?id=1&name=wdy&password=password

each():规定为每个匹配元素规定运行的函数,返回 false 可用于及早停止循环。

实例：

输出每个 li 元素的文本：

$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});



输出每个列表项的值

Coffee
Milk
Soda

attr():设置或返回被选元素的属性值。attr(一个值的话为返回被选元素的值，两个值为设置被选元素的值)

addClass():向被选元素添加一个或多个类。

removeClass():从被选元素移除一个或多个类。

到此，相信大家对“JS怎么实现点击目录名变换颜色的效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！