JS implementation example of the effect of clicking on a directory name to change color-JS Tutorial-php.cn

JS implementation example of the effect of clicking on a directory name to change color

眼眸间的深情

Release： 2021-07-21 09:25:08

Original

1553 people have browsed it

I really like some special effects, and I also like the navigation click effect of some corporate websites, but no matter how I use the click effect, it is not very ideal, so I got into trouble with this effect, and finally realized it by learning JS-related changing effects. Here is an example of the effect of clicking a directory name to change the color of the enterprise website navigation bar. Let me share my operation code:

First of all, I will show my final effect for everyone to take a look:

JS implementation example of the effect of clicking on a directory name to change color As shown in the picture above, the effect we need to achieve is that when the user clicks the corresponding navigation bar, we can make the corresponding navigation bar name change color to remind the user of the page they are on at the moment.

Let me show you the Html and JS code to achieve the above collision effect:

First, let’s show the front-end HTML code:

<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>

Copy after login

Then Let’s show the JS code:

<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>

Copy after login

3. Code analysis:

Front-end page:

The element with the class name location now is the label with the transformed color.

JS code:

decodeURI(): can decode the URI encoded by the encodeURI() function.

location.pathname: The result obtained is the complete address string in the browser address bar.

location.search: What is obtained is all the content after ? and ? in the URL path.

Example analysis:

The accessed URL path is:

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

location.pathname The result is:

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

location.search results are:

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

##each(): specified for each matching element Specifies the function to run, returning false can be used to stop the loop early.

Example:

Output the text of each li element:

<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>

Copy after login

attr(): Set or return the selected The attribute value of the element. attr (one value returns the value of the selected element, two values sets the value of the selected element)

addClass(): Add to the selected element Add one or more classes.

removeClass(): Remove one or more classes from the selected element.

Okay, this simple click navigation to achieve color change effect is realized. Although it looks very simple, it involves a lot of front-end knowledge, so we put every If we do simple things seriously, then when we encounter no matter how complicated things are, we can turn complexity into simplicity, and we can also handle problems better and faster! Keep up the good work, fellow PHP developers!

The above is the detailed content of JS implementation example of the effect of clicking on a directory name to change color. For more information, please follow other related articles on the PHP Chinese website!