2014-05-28 01:58
浏览 147


how to add active css class to a link in Wordpress such that the active menu li will have different color when that link is viewed.

  <li class=""><a href="/news">News</a></li> 
  <li class="devider">&nbsp;</li>
  <li class=""><a href="/about">About Us</a></li> 
  <li class="devider">&nbsp;</li>
  <li><a href="#">Partners</a></li> 
  <li class="devider">&nbsp;</li> 
  <li><a href="/vacancy">Careers</a></li>  <li class="devider">&nbsp;</li>
  <li><a target="_blank" href="/webmail">Email Login</a></li>

图片转代码服务由CSDN问答提供 功能建议

如何将活动的css类添加到Wordpress中的链接,以便活动菜单li在该链接时具有不同的颜色 查看。

 &lt; ul&gt; 
&lt; li class =“”&gt;&lt; a href =“/ news”&gt; News&lt; / a&gt;&lt;  /立GT;  
&lt; li class =“devider”&gt;&amp; nbsp;&lt; / li&gt; 
&lt; li class =“”&gt;&lt; a href =“/ about”&gt;关于我们&lt; / a&gt;&lt;  ; /立GT;  
&lt; li class =“devider”&gt;&amp; nbsp;&lt; / li&gt; 
&lt; li&gt;&lt; a href =“#”&gt;合作伙伴&lt; / a&gt;&lt; / li&gt;  
&lt; li class =“devider”&gt;&amp; nbsp;&lt; / li&gt;  
&lt; li&gt;&lt; a href =“/ vacancy”&gt; Careers&lt; / a&gt;&lt; / li&gt;  &lt; li class =“devider”&gt;&amp; nbsp;&lt; / li&gt; 
&lt; li&gt;&lt; a target =“_ blank”href =“/ webmail”&gt;电子邮件登录&lt; / a&gt;&lt; /  li&gt; 
&lt; / ul&gt; 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongyou5271 2014-05-30 17:45

    This is the most simple way to solve it. No javascript or anything than just Wordpress

    Use it just using Wordpress built-in boolean function

     <li<?php if (is_page('services')) { echo ' class="current_page_item"'; } ?>><a href="<?php echo home_url();?>/services">Services</a></li>

    here is the link from where i got this idea.

    点赞 打赏 评论
  • duan1979768678 2014-05-28 02:28

    the code you provided is not WordPress it`s just something you added to your "header.php" but you can try something like this for it:

    $(function() {
      $('ul a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');

    if you have a default WordPress menu the active class in it is called ".current-menu-item" and if you want to change it's name to let`s say ".active" find the file called "functions.php" and add this to it:

    add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
    function special_nav_class($classes, $item){
         if( in_array('current-menu-item', $classes) ){
                 $classes[] = 'active ';
         return $classes;
    点赞 打赏 评论

相关推荐 更多相似问题