z-blog讓導航突出顯示當前頁鏈接條目
互聯(lián)網 發(fā)布時間：2009-06-06 15:43:18 作者：jb51 
我要評論
我要評論關鍵字描述：鏈接 當前 顯示 導航 突出 " < .attr this 代碼
z-blog讓導航突出顯示當前頁鏈接條目：
我們的大致思路是這樣的，首先用js給導航部分中當前鏈接項加個區(qū)分的ID,如<li id=“current”>首頁</li>，然后再用CSS定義就完成了
關鍵字描述：鏈接 當前 顯示 導航 突出 " < .attr this 代碼
setp1 :加入js(jQuery代碼)，如下
setp2 :定義CSS樣式
z-blog讓導航突出顯示當前頁鏈接條目：
我們的大致思路是這樣的，首先用js給導航部分中當前鏈接項加個區(qū)分的ID,如<li id=“current”>首頁</li>，然后再用CSS定義就完成了。
原先功能簡單的代碼
<script type="text/javascript">
$(document).ready(function(){
$("#menu ul>li").each(function() { //我們假設導航部分的ID為menu，結構是<div id="menu"><ul><li>...
if ($(this).find("a").attr("href")==document.URL){
$(this).attr("id","current") //給當前頁的<li>加上id="current"，如<li id="current">首頁</li>
}
});
});
</script>
haphic將這一代碼做了完善，此代碼只支持 Z-Blog 模板.
haphic 完善后的代碼
<script type="text/javascript">
$("#menu ul>li").each(function() {
if ($(this).find("a").attr("href").toLowerCase() !== str00.toLowerCase()){
if (document.URL.toLowerCase().indexOf($(this).find("a").attr("href").toLowerCase()) !== -1){
$(this).attr("id","current")
}
}else{
if ($(this).find("a").attr("href").toLowerCase() == document.URL.toLowerCase()){
$(this).attr("id","current")
}
}
});
</script>
#menu ul li#current {
background-color:#fff;
color:#0B1316;
}
相關文章
- 這篇文章主要介紹了Nginx的Z-Blog的偽靜態(tài)配置方法,需要的朋友可以參考下2014-12-07
- 這篇文章主要介紹了Z-Blog 使用Tmt主題時修改底部版權的方法,需要的朋友可以參考下2014-12-07
- zblog2.2的技巧下文分享給大家2014-09-29
- 如果不修改默認后臺地址總會感覺安全性靠不住。出于這個考慮，我今天也一直在想辦法修改默認的后臺地址2014-05-21
- 很多朋友剛建立博客的時候都是采用國內優(yōu)秀的博客系統(tǒng)：Z-BLOG，用一段時間過后很多人都想轉移到wordpress,各種轉移原因很多。學朋的主要原因就是Z-BLOG官方長時間不對博客2012-09-15
- 有關z-blog插件的制作過程步驟，在搜索引擎里至今沒有發(fā)現一篇詳細的教程，官方也沒有給出一個詳細的實例，所以不少躍躍欲試的朋友，卻找不到方向，甚為苦惱2012-03-04
- 前段日子，這個博客的文章瀏覽數和評論數頻繁出現問題，有很多時候是顯示不出數據，除此外，就是顯示的數據一團糟2012-03-04
- zblog有個自動生成文章摘要的功能，這給我們在發(fā)表文章的時候提供了一些方便，節(jié)省了要手動添加文章摘要的時間，這個功能很好2012-03-04
- 今天狠狠的給這個博客動了一次大手術，那就是所有目錄靜態(tài)化，包括博客首頁靜態(tài)化，歸檔首頁靜態(tài)化2012-03-04
- 有個功能有些站長會喜歡，那就是文章發(fā)布的默認瀏覽數2012-03-04