• 技术文章 >web前端 >js教程

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

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

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

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

    下面我就展示一下实现上述碰撞效果的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路径为:

    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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:JS
    上一篇:CSS+JS如何制作皮卡丘动画(代码分析) 下一篇:java和javascript哪个简单
    第16期线上培训班

    相关文章推荐

    • 你知道前端是如何实现水印的吗• 手把手教你如何使用Vite+React进行组件开发(实践)• Python为什么像JavaScript• 浅谈Angular路由跳转中的navigateByUrl和navigate• 关于electron-vue图片压缩

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网