首頁 > 文章 > web前端 > JS實作點選目錄名稱變換顏色的效果實例

JS實作點選目錄名稱變換顏色的效果實例

眼眸间的深情原創: 2021-07-19 19:45:021404瀏覽

很喜歡一些特效，更喜歡一些企業站的導航點擊效果，但是無論自己怎麼使用點擊效果都是不怎麼理想，於是跟這個效果槓上了，最後透過學習JS相關的變幻效果，最後實現了企業站導覽列點選目錄名稱變換顏色的效果實例，以下來分享我的操作程式碼：

首先我先將我的最終效果展示讓大家瞧：

JS實作點選目錄名稱變換顏色的效果實例如上圖所示，我們需要實現的效果是當使用者點擊對應的導覽列的時候，我們可以讓對應的導覽列名稱變換顏色，以提醒使用者此刻所處的頁面。

在下面我就展示一下實作上述碰撞效果的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中文網其他相關文章！

php html 循环 JS location li http

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS+JS如何製作皮卡丘動畫（程式碼分析）下一篇：CSS+JS如何製作皮卡丘動畫（程式碼分析）

看更多