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

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

成都創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)蔚縣,10年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

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

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

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

下面我就展示一下實現(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é)果時瀏覽器地址欄中的完整地址串。

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

實例解析：

訪問的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ī)定為每個匹配元素規(guī)定運行的函數(shù),返回 false 可用于及早停止循環(huán)。

實例：

輸出每個 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():設(shè)置或返回被選元素的屬性值。attr(一個值的話為返回被選元素的值，兩個值為設(shè)置被選元素的值)

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

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

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

文章題目：JS怎么實現(xiàn)點擊目錄名變換顏色的效果
轉(zhuǎn)載來源：http://muchs.cn/article12/phdddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、靜態(tài)網(wǎng)站、云服務(wù)器、品牌網(wǎng)站建設(shè)、定制網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)