溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JS怎么實現點擊目錄名變換顏色的效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JS怎么實現點擊目錄名變換顏色的效果”吧!
很喜歡一些特效，更喜歡一些企業站的導航點擊效果，但是無論自己怎么使用點擊效果都是不怎么理想，于是跟這個效果杠上了，最后通過學習JS相關的變幻效果，最后實現了企業站導航欄點擊目錄名變換顏色的效果實例，下面來分享我的操作代碼：
首先我先將我的最終效果展示讓大家瞧一瞧：
如上圖所示，我們需要實現的效果是當用戶點擊相應的導航欄的時候，我們可以讓相應的導航欄名變換顏色，以提醒用戶此刻所處的頁面。
下面我就展示一下實現上述碰撞效果的Html和JS代碼：
首先來展示一下前端的HTML代碼：
<div>
<div>
<ul>
<li><a class="location now" href="{:U('Index/index')}">首頁</a></li>
<li><a href="{:U('Index/product')}">產品展示</a></li>
<li><a href="{:U('Index/about')}">關于我們</a></li>
<li><a href="{:U('Index/news')}">新聞資訊</a></li>
<li><a href="{:U('Index/video')}">視頻中心</a></li>
<li><a href="{:U('Index/contact')}">聯系我們</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的元素為變換后顏色的標簽。
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():從被選元素移除一個或多個類。
到此，相信大家對“JS怎么實現點擊目錄名變換顏色的效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
