小技巧:教你实现wordpress代码导航当前页面高亮

以下代码来源于网络,可以实现当前页面导航高亮,进入文章也可实现当前类别高亮,但对下拉菜单无效。

PS:js代码需要放在当前页,放在单独js文件内会失效。此代码不包含css样式,请根据代码自行修改…

<!– menus START –>

<script type=”text/javascript” language=”javascript”>

function gaoliangfenlei()

{

var nav = document.getElementById(“menus”);

var links = nav.getElementsByTagName(“li”);

var lilen = nav.getElementsByTagName(“a”); //判断地址

var currenturl = document.location.href;

var last = 0;

for (var i=0;i<links.length;i++)

{

var linkurl = lilen[i].getAttribute(“href”);

if(currenturl.indexOf(linkurl)!=-1)

{

last = i;

}

}

links[last].className = “current_page_item”; //高亮代码样式

}

</script>

<script type=”text/javascript” language=”javascript”>

function gaoliangwenzhangfenlei(catname)

{

var caidan =”<?php echo $caidan ?>” ;//赋值

var fenleiming =”<?php echo $catname ?>” ;//赋值

var nav = document.getElementById(“menus”);

var links = nav.getElementsByTagName(“li”);

var as = nav.getElementsByTagName(“a”);

var last = 0;

for (var i=0;i<links.length;i++)

{

var li = links[i].innerHTML;

var ai=as[i].innerHTML;

if(ai==catname)

{

last = i;

links[last].className = “current_page_item”; //高亮代码样式

}

}

}

</script>

 

<ul id=”menus”><li <?php if (is_home()) { echo ‘ class=”current_page_item”‘;} ?> ><a class=”home ” href=”/”>首页</a></li>

<?php

$caidan=wp_nav_menu(array(‘theme_location’ => ‘header-menu’,’container’ => ‘false’,’echo’ => false,’items_wrap’=> ‘%3$s’, ) );

$catname = ”;

if(!is_page() && !is_home()) {

$cat = get_the_category();

$catid = $cat[0]->cat_ID;

$catname = $cat[0]->cat_name;

if(is_category() ){

echo $caidan;

echo “<script type=’text/javascript’ language=’javascript’>gaoliangfenlei()</script>”;

}

else{

echo $caidan;

echo “<script type=’text/javascript’ language=’javascript’>gaoliangwenzhangfenlei(‘$catname’)</script>”;

}

}

else{

echo $caidan;

}

?>

</ul>

<!– menus END –>

本文固定链接: http://www.ioedo.com/1523.html | 网页设计师交流网_edo欧晓峰博客_网页设计师一枚_专注于网页设计

该日志由 admin 于2014年04月13日发表在 小技巧 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 小技巧:教你实现wordpress代码导航当前页面高亮 | 网页设计师交流网_edo欧晓峰博客_网页设计师一枚_专注于网页设计
关键字: , ,

小技巧:教你实现wordpress代码导航当前页面高亮:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter