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