JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
本文實(shí)例講述了JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果。分享給大家供大家參考。具體如下:
這里演示選中當(dāng)前菜單后,該菜單高亮顯示,也就是說(shuō)在不改變菜單CSS代碼的情況下,用JavaScript去控制菜單的背景,如果該菜單項(xiàng)被點(diǎn)擊后,將賦予它一個(gè)與眾不同的背景顏色或背景圖像,這樣可以清淅的指引用戶(hù)下在瀏覽的網(wǎng)站欄目,本菜單不需要?jiǎng)討B(tài)語(yǔ)言的加入,簡(jiǎn)單方便而且效果好。
運(yùn)行效果截圖如下:
在線(xiàn)演示地址如下:
http://demo.jb51.net/js/2015/js-cho-nav-gl-show-menu-demo/
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>選中當(dāng)前菜單后高亮</title> <style type="text/css"> <!-- .nav { MARGIN: 1px 0; WIDTH: 100%; FONT-FAMILY: verdana; HEIGHT: 21px; BACKGROUND-COLOR: #970B0B; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .nav UL { PADDING: 0px; DISPLAY: block; MARGIN: 0px; LIST-STYLE-TYPE: none; HEIGHT: 21px; BACKGROUND-COLOR: #970B0B; COLOR: #ffffff; } .nav LI { BORDER-RIGHT: #ffffff 1px solid; DISPLAY: block; FLOAT: left; HEIGHT: 21px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .nav LI A { PADDING:1px 15px 0; DISPLAY: block; FONT-WEIGHT: none; COLOR: #ffffff; LINE-HEIGHT: 20px; TEXT-DECORATION: none; } .nav LI A:hover { COLOR:#562505; BACKGROUND-COLOR: #f4f524; TEXT-DECORATION: none; } .current{ color:#ffffff; background:#D42524; } .nav li#date{ color:#ffffff; PADDING:2px 15px 0; } --> </style> <script language="javascript" type="text/javascript"> var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;}; Array.prototype.each=function(func){ for(var i=0,l=this.length;i<l;i++) {func(this[i],i);}; }; document .getElementsByClassName=function(cn){ var hasClass=function(w,Name){ var hasClass = false; w.className.split(' ').each(function(s){ if (s == Name) hasClass = true; }); return hasClass; }; var elems =document.getElementsByTagName("*")||document.all; var elemList = []; $c(elems).each(function(e){ if(hasClass(e,cn)){elemList.push(e);} }) return $c(elemList); }; function change_bg(obj){ var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a"); for(var i=0;i<a.length;i++){a[i].className="";} obj.className="current"; } </script> </head> <body> <DIV class="nav"> <UL> <LI><A href="#" onclick="change_bg(this)">腳本首頁(yè)</A></LI> <LI><A href="#" onclick="change_bg(this)">網(wǎng)頁(yè)特效</A> </LI> <LI><a href="#" class="current" onclick="change_bg(this)">精品腳本</a> </LI> <LI><A href="#" onclick="change_bg(this)">ASP代碼</A> </LI> <LI><A href="#" onclick="change_bg(this)">PHP代碼</A> </LI> <LI><A href="#" onclick="change_bg(this)">JSP代碼</A> </LI> <LI><A href="#" onclick="change_bg(this)">腳本資源</A> </LI> <LI><A href="#" onclick="change_bg(this)">軟件下載</A> </LI> </UL> </DIV> </body> </html>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
- 一個(gè)js控制的導(dǎo)航菜單實(shí)例代碼
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果
- js實(shí)現(xiàn)移動(dòng)端導(dǎo)航點(diǎn)擊自動(dòng)滑動(dòng)效果
- JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色特效
- js實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形導(dǎo)航列表效果代碼
- js實(shí)現(xiàn)的常用的左側(cè)導(dǎo)航效果
- JavaScript實(shí)現(xiàn)滑動(dòng)導(dǎo)航欄效果
- 原生js實(shí)現(xiàn)波浪導(dǎo)航效果
相關(guān)文章
JavaScript設(shè)計(jì)模式---單例模式詳解【四種基本形式】
這篇文章主要介紹了JavaScript設(shè)計(jì)模式---單例模式,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript設(shè)模式中單例模式的四種基本形式定義與使用方法,需要的朋友可以參考下2020-05-05javascript 獲取鏈接文件地址中第一個(gè)斜線(xiàn)內(nèi)的正則表達(dá)式
我想得到“windows”,請(qǐng)問(wèn)用正則表達(dá)式怎么寫(xiě)?2009-06-06JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07兼容Firefox的Javascript XSLT 處理XML文件
這篇文章主要介紹了兼容Firefox的Javascript XSLT 處理XML文件,需要的朋友可以參考下2014-12-12JS+CSS實(shí)現(xiàn)網(wǎng)頁(yè)加載中的動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)網(wǎng)頁(yè)加載中的動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10漂亮實(shí)用的頁(yè)面loading(加載)封裝代碼
要做一個(gè)異步登錄,打算給用戶(hù)做一點(diǎn)提示,所以就網(wǎng)上找了點(diǎn)代碼,自己修改新增了一些,做了一個(gè)html+css+js的功能封裝,供大家參考,需要的朋友參考下吧2017-02-02JS復(fù)雜判斷的更優(yōu)雅寫(xiě)法代碼詳解
我們編寫(xiě)js代碼時(shí)經(jīng)常遇到復(fù)雜邏輯判的情況,通常大家可以用if/else或者switch來(lái)實(shí)現(xiàn)多個(gè)條件判斷,但這樣會(huì)有個(gè)問(wèn)題,隨著邏輯復(fù)雜度的增加,代碼中的if/else/switch會(huì)變得越來(lái)越臃腫,越來(lái)越看不懂,那么如何更優(yōu)雅的寫(xiě)判斷邏輯,本文帶你試一下2018-11-11