jQuery是一款著名的JavaScript庫,被廣泛應用于網頁開發中。在網頁中,導航是一個非常重要的組成部分,而使用jQuery可以輕松實現導航選中效果。通過給導航添加CSS類,即可在當前頁的導航項中應用不同的樣式。
/* 選中樣式 */ .selected { color: #fff; background-color: #333; }
例如,在一個有五個導航項的頁面中,我們可以在jQuery中使用以下代碼來添加選中樣式:
$(document).ready(function() { // 獲取當前頁面的URL var currentUrl = window.location.href; // 獲取導航欄中所有鏈接的URL var navUrls = $('nav a').map(function() { return this.href; }).get(); // 獲取當前URL在導航欄中的位置 var index = navUrls.indexOf(currentUrl); // 給當前導航項添加選中樣式 $('nav li').eq(index).addClass('selected'); });
上述代碼首先獲取當前頁面的URL,然后獲取導航欄中所有鏈接的URL,并通過“indexOf”函數來確定當前URL在導航欄中的位置。最后,使用“addClass”函數為當前導航項添加選中樣式。
通過這種方式,我們只需要將選中樣式與當前導航項相關聯,即可輕松實現導航選中效果。使用jQuery,使網頁開發變得更加輕松愉快。
上一篇jquery 小數乘法
下一篇jquery 小數取整數