溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS怎么實(shí)現(xiàn)點(diǎn)擊目錄名變換顏色的效果

發(fā)布時(shí)間：2021-07-21 10:50:09 來源：億速云 閱讀：114 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“JS怎么實(shí)現(xiàn)點(diǎn)擊目錄名變換顏色的效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JS怎么實(shí)現(xiàn)點(diǎn)擊目錄名變換顏色的效果”吧!

很喜歡一些特效，更喜歡一些企業(yè)站的導(dǎo)航點(diǎn)擊效果，但是無論自己怎么使用點(diǎn)擊效果都是不怎么理想，于是跟這個(gè)效果杠上了，最后通過學(xué)習(xí)JS相關(guān)的變幻效果，最后實(shí)現(xiàn)了企業(yè)站導(dǎo)航欄點(diǎn)擊目錄名變換顏色的效果實(shí)例，下面來分享我的操作代碼：

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

JS怎么實(shí)現(xiàn)點(diǎn)擊目錄名變換顏色的效果如上圖所示，我們需要實(shí)現(xiàn)的效果是當(dāng)用戶點(diǎn)擊相應(yīng)的導(dǎo)航欄的時(shí)候，我們可以讓相應(yīng)的導(dǎo)航欄名變換顏色，以提醒用戶此刻所處的頁面。

下面我就展示一下實(shí)現(xiàn)上述碰撞效果的Html和JS代碼：

首先來展示一下前端的HTML代碼：

<div>
<div>
   <ul>
       <li><a class="location now" href="{:U('Index/index')}">首頁</a></li>
            <li><a  href="{:U('Index/product')}">產(chǎn)品展示</a></li>
            <li><a  href="{:U('Index/about')}">關(guān)于我們</a></li>
            <li><a  href="{:U('Index/news')}">新聞資訊</a></li>
            <li><a  href="{:U('Index/video')}">視頻中心</a></li>
            <li><a  href="{:U('Index/contact')}">聯(lián)系我們</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的元素為變換后顏色的標(biāo)簽。

JS代碼：

decodeURI():可對 encodeURI() 函數(shù)編碼過的 URI 進(jìn)行解碼。

location.pathname：得到的結(jié)果時(shí)瀏覽器地址欄中的完整地址串。

location.search：得到的是URL路徑中?以及?之后的所有內(nèi)容。

實(shí)例解析：

訪問的URL路徑為：

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

location.pathname得到的結(jié)果為：

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

location.search得到的結(jié)果為：

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

each():規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù),返回 false 可用于及早停止循環(huán)。

實(shí)例：

輸出每個(gè) 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>輸出每個(gè)列表項(xiàng)的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

attr():設(shè)置或返回被選元素的屬性值。attr(一個(gè)值的話為返回被選元素的值，兩個(gè)值為設(shè)置被選元素的值)

addClass():向被選元素添加一個(gè)或多個(gè)類。

removeClass():從被選元素移除一個(gè)或多個(gè)類。

到此，相信大家對“JS怎么實(shí)現(xiàn)點(diǎn)擊目錄名變換顏色的效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手