首页 > web前端 > js教程 > 正文

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

眼眸间的深情
发布: 2021-07-21 09:25:08
原创
1498 人浏览过

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

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

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

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

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

<div>
<div>
   <ul>
       <li><a class="location now" href="{:U(&#39;Index/index&#39;)}">首页</a></li>
            <li><a  href="{:U(&#39;Index/product&#39;)}">产品展示</a></li>
            <li><a  href="{:U(&#39;Index/about&#39;)}">关于我们</a></li>
            <li><a  href="{:U(&#39;Index/news&#39;)}">新闻资讯</a></li>
            <li><a  href="{:U(&#39;Index/video&#39;)}">视频中心</a></li>
            <li><a  href="{:U(&#39;Index/contact&#39;)}">联系我们</a></li>
        </ul>
    </div>
</div>
登录后复制

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

<script type="text/javascript">
    $(function () {
        var url = decodeURI(location.pathname+location.search);
        $(".location").each(function () {
            if ($(this).attr(&#39;href&#39;) == url)
            {
                $(this).addClass(&#39;now&#39;)
            }else {
                $(this).removeClass(&#39;now&#39;)
            }
        })
    })
</script>
登录后复制

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 元素的文本:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
登录后复制

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

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

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

好了,这个简单的点击导航实现颜色变换的效果实现了,虽然看着很简单,但是里面涉及的前端知识也是不少,所以我们把每一件简单的事情认真做,那么当我们遇到再怎么复杂的事情时,我们也能化复杂为简单,而且我们也可以去更好更快地处理问题!继续加油吧,PHP开发的小伙伴们!

 

 

以上是JS实现点击目录名变换颜色的效果实例的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
js
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!