WordPress-代码实现导航当前页面高亮

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

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

Code   ViewCopyPrint
<!-- 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 -->

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: