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路径为：

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实现点击目录名变换颜色的效果实例的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！