用js查找法實現(xiàn)當前欄目的高亮顯示的代碼
當前欄目高亮顯示
JS判斷當前URL對當前欄目高亮顯示,重點是用到了indexOf來判斷兩個字符串中第一次出現(xiàn)的位置,如果沒有出現(xiàn)就返回-1,出現(xiàn)就返回其它,并與返回其它結果的那個字符串所在元素定義一個class.
HTML
<div id="nav"> <ul> <li><a href="http://www.dhdzp.com/html/list/index_127.htm" title="資訊中心"><span>資訊中心</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_1.htm" title="網(wǎng)絡編程"><span>網(wǎng)絡編程</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_104.htm" title="數(shù)據(jù)庫"><span>數(shù)據(jù)庫</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_96.htm" title="腳本專欄"><span>腳本專欄</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_7.htm" title="實用技巧"><span>實用技巧</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_84.htm" title="軟件編程"><span>軟件編程</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_8.htm" title="網(wǎng)頁制作"><span>網(wǎng)頁制作</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_86.htm" title="操作系統(tǒng)"><span>操作系統(tǒng)</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_11.htm" title="經(jīng)典網(wǎng)摘"><span>經(jīng)典網(wǎng)摘</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_27.htm" title="網(wǎng)站技巧"><span>網(wǎng)站技巧</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_99.htm" title="免費資源"><span>免費資源</span></a></li> <li><a href="http://www.dhdzp.com/html/list/index_54.htm" title="關于我們"><span>關于我們</span></a></li> <li><a href="http://www.dhdzp.com/search.asp" title="文章搜索"><span>文章搜索</span></a></li> </ul> </div>
JS
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++)
{
var links = myNav[i].getAttribute("href");
//alert(links)
//alert(myNav[i]);
var myURL = document.location.href;
if(myURL.indexOf(links) != -1)
{
myNav[i].className="d";
}
}
當前欄目高亮顯示不知道你明白了沒有？沒有的話，我說詳細點。首先，你點擊一個連接，比如： <li><a
href="http://www.dhdzp.com/html/list/index_127.htm" title="資訊中心">資訊中心</a></li>
點擊之后瀏覽器發(fā)生了什么變化呢？是的，就是地址欄變成了：
//www.dhdzp.com/html/list/index_127.htm
使用 document.location.href;
取得的就是這個地址(//www.dhdzp.com/html/list/index_127.htm)。
然后我們再遍歷當前網(wǎng)頁上的所有連接，取得每個連接href的值。遍歷的代碼：
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++)
{
var links = myNav[i].getAttribute("href");
}
使用indexOf函數(shù)來比較是否頁面的所有連接中，有關鍵字在//www.dhdzp.com/html/list/index_127.htm中出現(xiàn)。若有的話，就表 明是當前連接，那么就修改當前連接的樣式。這就實現(xiàn)了當前欄目高亮顯示，當前欄目高亮顯示是一個很實用的技巧，在增加用戶體驗方面尤 其有好處。但在實用過程中，可能需要注意一些細節(jié)問題，比如搜索吧的博客是用外鏈的方式來連接的，那么在處理的時候，點了這個外鏈的 時候是否高亮呢?這里也只是我覺得當前欄目高亮顯示時可能出現(xiàn)的問題稍微說一下，說不定你已經(jīng)有解決方法了。
相關文章
這里使用JS實現(xiàn)網(wǎng)頁上的霓虹燈文字特效代碼特效，運行效果看一下，你會看到文字的顏色像霓虹燈一樣，連續(xù)不停變化，五顏六色的，很炫的樣子，所以就叫做霓虹文字，也可以叫他文字變色效果，下面跟著小編一起學習JavaScript制作霓虹燈文字 代碼特效，需要的朋友一起學習吧2015-09-09
這篇文章主要為大家詳細介紹了layui-laydate時間日歷控件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了JS基于正則截取替換特定字符之間字符串操作方法,結合具體實例形式分析了JS基于正則實現(xiàn)針對特殊字符、數(shù)字等字符串類型的截取操作相關技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS加載解析Markdown文檔過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了使用D3.js構建實時圖形的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
上午在做一些測試.把頁面拿到火狐上去就出現(xiàn)一堆問題.頁面布局先不說.Javascript代碼的問題就夠頭疼2009-05-05
這篇文章主要為大家詳細介紹了前端js實現(xiàn)手風琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
在現(xiàn)代 Web 開發(fā)中,JavaScript 提供了多種方法來與瀏覽器窗口進行交互,包括最大化和最小化瀏覽器窗口,雖然瀏覽器通常會限制對窗口尺寸的直接控制,但我們依然可以實現(xiàn)一些常見的行為,本文將探討如何使用 JavaScript 實現(xiàn)窗口的最大化和最小化效果2024-12-12
這篇文章主要為大家詳細介紹了JavaScript模板引擎Template.js使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
非常不錯的思路，用js實現(xiàn)表格的隨機排序，建議大家看代碼，學習編程思路2008-09-09