jQuery實現簡單的導覽按鈕焦點背景更換（代替css hover）以及彈出子功能表 我的第一篇博文

    這是我的第一篇博文，我對電腦網路和web編程開發感興趣，有時也試著寫一點java，目前在上大學，知識學習剛剛起步。以後打算經常寫一些自己遇到的問題和知識，記錄的同時接受指點，不僅日後方便查閱，也有個獲得探討和學習的環境。

 

    不久前開始接觸jQuery，我用jQuery在簡單的網頁導航條上代替了javascript和css hover進行背景的更換和彈出子功能表，是一個簡單的入門。

 

     以前在簡單的導航條中經常應用css hover偽類製造滑鼠焦點的背景變換：

a:link { color:#C0C0C0; font-size:12px;font-family:微軟雅黑;text-decoration:none;}a:hover{ color:#66CCFF; font-size:12px;font-family:微軟雅黑;text-decoration:none;}

    這樣可以實現簡單的顏色背景替換，或者下面一樣加入圖片，實現起來很方便但也有一些缺點，比如標籤的相容性(IE6不支援a之外的標籤使用hover)：

div {background:url(/images/img1.jpg) repeat-X right top;}div a:hover{background:url(/images/img2.jpg) repeat-X right top;}

如果使用其他標籤帶hover，就不得不面對相容性的問題：

.menu ul li:hover,.menu ul li.funchover{//使用js定義funchover方法background:url(/images/img2.jpg) repeat-X right top;}

同時注意到使用此類偽類還有一個重要的順序問題，即link、  visited 、hover、 active四個偽類必須保持嚴格的順序，a:hover 必須位於 a:link 和 a:visited 之後，a:active 必須位於 a:hover 之後。

a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}

另外之前用過加filter濾鏡，連結中文字一起被過濾，效果不佳，不建議使用：

.demo a:hover{filter:alpha(opacity=100,finishopacity=80,style=1);background:url(/images/img2.jpg) repeat-X right top;}

 

後來常用的是用javascript的onmouseover onmouseout事件代替實現此類效果，以確保相容和簡便。如：

js部分：

function over(id){var getsrc=document.getElementById(id);getsrc.src="images/menu_hover_"+id+".png";}function out(id){var getsrc=document.getElementById(id);getsrc.src="images/menu_"+id+".png";}

HTML部分：

 <img src="images/menu_05.png" id="05" onmouseover="over('05')" onmouseout="out('05')"/>

今天試了用jQuery來寫，jQuery的封裝很強大，選取器也很實用，使用很方便：

 

$("#menu img").mouseover(function(){$(this).attr("src","images/menu_hover_"+$(this).attr("id")+".png");})$("#menu img").mouseout(function(){$(this).attr("src","images/menu_"+$(this).attr("id")+".png");})

同時加入了一個子功能表，用jQuery的slideUp() slideDown()實現漸顯和漸隱：

 $("#07").click(function(){  if($("#submenu_sub_07").is(":hidden")){  $("#submenu_sub_07").slideDown("slow");  }else{ $("#submenu_sub_07").slideUp();   }//也可用fadeIn()和fadeOut()漸隱漸顯  })

HTML部分：

 <div id="submenu_sub_07"  style="display:none;" >     <!--      子功能表      -->   </div>

 

    相比使用javascript的原生方法更改display屬性更加美觀了。這是實現效果（圖片原素材來源於網路）:

 

  fadeIn()和fadeOut()，slideDown()和slideUp() ，使用方法大致一樣，有兩個選擇性參數，一為動作持續的時間，單位為毫秒，也可使用預定義的字串"slow","normal","fast"；另一參數為動作完畢後進行調用的回呼函數。

  有彈出動作的部分在樣式中應該使用position:absolute;進行定位（父級使用relative），以免對下方元素產生下沉。例如文中的快顯功能表位置：

#submenu {position:absolute;height:125px;width:980px;}

 

 

想到很久以前犯過的一個菜鳥問題，在javascript中用getElementById()擷取元素並更改圖片地址，試圖這樣寫：

var target=document.getElementById(id).src;target="images/pic0.png";

 

寫完後檢查發現不起作用，然後開始“霰彈槍”的查錯，包括各處標籤文法一一核對不得解決，最後發現竟然是如此低級的錯誤：getElementById(id).src獲得的已不是對象，而是字串，再對此target賦值，原對象當然不受影響。。應該這樣寫：

var target=document.getElementById(id);target.src="images/pic0.png";

或者直接：

document.getElementById(id).src="images/pic0.png";

這是改變對象屬性的問題，擷取的是id=id的這一個對象，而src為對象屬性，擷取只能得到屬性值。

    有了寫博的想法，謹在這第一篇博文中紀念這低級錯誤，當作日後的當頭警鐘。

    新手起步，歡迎批評指正～