如何用JavaScript实现点击目录名改变颜色并针对长尾词提问？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1086个文字，预计阅读时间需要5分钟。
我很喜欢一些特效，尤其是一些网站导航的点击效果。虽然我自己不知道如何使用这些效果，但看到这样的效果还是觉得很有趣。后来通过学习JavaScript相关技巧，我最终实现了这些效果，也成功地打造了网站导航。
很喜欢一些特效，更喜欢一些企业站的导航点击效果，但是无论自己怎么使用点击效果都是不怎么理想，于是跟这个效果杠上了，最后通过学习JS相关的变幻效果，最后实现了企业站导航栏点击目录名变换颜色的效果实例，下面来分享我的操作代码：首先我先将我的最终效果展示让大家瞧一瞧：
如上图所示，我们需要实现的效果是当用户点击相应的导航栏的时候，我们可以让相应的导航栏名变换颜色，以提醒用户此刻所处的页面。
下面我就展示一下实现上述碰撞效果的Html和JS代码：
首先来展示一下前端的HTML代码：
<div> <div> <ul> <li><a class="location now" href="{:U('Index/index')}">首页</a></li> <li><a href="{:U('Index/product')}">产品展示</a></li> <li><a href="{:U('Index/about')}">关于我们</a></li> <li><a href="{:U('Index/news')}">新闻资讯</a></li> <li><a href="{:U('Index/video')}">视频中心</a></li> <li><a href="{:U('Index/contact')}">联系我们</a></li> </ul> </div> </div>
然后我们来展示一下JS代码：
<script type="text/javascript"> $(function () { var url = decodeURI(location.pathname+location.search); $(".location").each(function () { if ($(this).attr('href') == url) { $(this).addClass('now') }else { $(this).removeClass('now') } }) }) </script>
3.代码解析：
前端页面：
类名为location now的元素为变换后颜色的标签。
JS代码：
decodeURI():可对 encodeURI() 函数编码过的 URI 进行解码。
location.pathname：得到的结果时浏览器地址栏中的完整地址串。
location.search：得到的是URL路径中?以及?之后的所有内容。
实例解析：
访问的URL路径为：
www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password
location.pathname得到的结果为：
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实现点击目录名变换颜色的效果实例的详细内容，更多请关注自由互联其它相关文章！
本文共计1086个文字，预计阅读时间需要5分钟。
我很喜欢一些特效，尤其是一些网站导航的点击效果。虽然我自己不知道如何使用这些效果，但看到这样的效果还是觉得很有趣。后来通过学习JavaScript相关技巧，我最终实现了这些效果，也成功地打造了网站导航。
很喜欢一些特效，更喜欢一些企业站的导航点击效果，但是无论自己怎么使用点击效果都是不怎么理想，于是跟这个效果杠上了，最后通过学习JS相关的变幻效果，最后实现了企业站导航栏点击目录名变换颜色的效果实例，下面来分享我的操作代码：首先我先将我的最终效果展示让大家瞧一瞧：
如上图所示，我们需要实现的效果是当用户点击相应的导航栏的时候，我们可以让相应的导航栏名变换颜色，以提醒用户此刻所处的页面。
下面我就展示一下实现上述碰撞效果的Html和JS代码：
首先来展示一下前端的HTML代码：
<div> <div> <ul> <li><a class="location now" href="{:U('Index/index')}">首页</a></li> <li><a href="{:U('Index/product')}">产品展示</a></li> <li><a href="{:U('Index/about')}">关于我们</a></li> <li><a href="{:U('Index/news')}">新闻资讯</a></li> <li><a href="{:U('Index/video')}">视频中心</a></li> <li><a href="{:U('Index/contact')}">联系我们</a></li> </ul> </div> </div>
然后我们来展示一下JS代码：
<script type="text/javascript"> $(function () { var url = decodeURI(location.pathname+location.search); $(".location").each(function () { if ($(this).attr('href') == url) { $(this).addClass('now') }else { $(this).removeClass('now') } }) }) </script>
3.代码解析：
前端页面：
类名为location now的元素为变换后颜色的标签。
JS代码：
decodeURI():可对 encodeURI() 函数编码过的 URI 进行解码。
location.pathname：得到的结果时浏览器地址栏中的完整地址串。
location.search：得到的是URL路径中?以及?之后的所有内容。
实例解析：
访问的URL路径为：
www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password
location.pathname得到的结果为：
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实现点击目录名变换颜色的效果实例的详细内容，更多请关注自由互联其它相关文章！