做一個導航欄,單擊不同的章節名稱連結,顯示相應的內容,同時高亮顯示當前的章節。
工具/原料
Dreamweaver 軟體
臺式電腦
方法/步驟
第一步,先要把jQuery庫匯入,才能使用jQuery中的方法。至於如何匯入我會在下一個經驗中詳細講解。
第二步,先要完成html程式碼,以及設定css樣式,程式碼如圖:
html程式碼中的內容可以根據自己的實際要求來填寫!
使用快捷鍵F12瀏覽效果,如圖。
第三步,返回程式碼頁面,在css樣式中設定一個id樣式和類樣式並且應用於每一個div中:程式碼如圖。
第四步,使用jQuery實現導航欄效果,程式碼:
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});
如圖。
第五步,快捷鍵F12瀏覽效果,如圖:
注意事項
記住要匯入jQuery庫,否則使用不了其方法。
希望可以幫助到大家!覺得好的話,可以投我一票後者點個贊!