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

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

眼眸间的深情
發布: 2021-07-21 09:25:08
原創
1634 人瀏覽過

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

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

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

在下面我就展示一下實作上述碰撞效果的Html和JS程式碼:

首先來展示前端的HTML程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

<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程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

<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 元素的文字:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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中文網其他相關文章!

相關標籤:
js
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - js addClass 無效
來自於 1970-01-01 08:00:00
0
0
0
php呼叫js並取得js的回傳值問題
來自於 1970-01-01 08:00:00
0
0
0
js進階教程
來自於 1970-01-01 08:00:00
0
0
0
找不到js檔案程式碼
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板