current_page_item无法使用wordpress中的静态菜单

时间:2011-06-27 01:53:03

标签: javascript jquery html css wordpress

CSS STYLING

#menu {width:245px;float:left;}
#menu li {display:block;margin-bottom:2px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;behavior:url(js/PIE.htc);position:relative}
#menu li a {display:block;font-size:12px;text-transform:uppercase;color:#fff;line-height:43px;padding-left:36px;font-weight:400;text-decoration:none}
#menu li a:hover{font-weight:700}
#menu .current_page_item a:link, #menu .current_page_item a:visited {
    font-weight:700;
}
#menu .nav1 {background:url(images/menu_bg1.gif) top repeat-x #0f356b}
#menu .nav1 a {background:url(images/menu_marker1.gif) 21px 18px no-repeat}
#menu .nav2 {background:url(images/menu_bg2.gif) top repeat-x #0f696b}
#menu .nav2 a {background:url(images/menu_marker2.gif) 21px 18px no-repeat}
#menu .nav3 {background:url(images/menu_bg3.gif) top repeat-x #0f696b}
#menu .nav3 a {background:url(images/menu_marker3.gif) 21px 18px no-repeat}
#menu .nav4 {background:url(images/menu_bg4.gif) top repeat-x #6b450f}
#menu .nav4 a {background:url(images/menu_marker4.gif) 21px 18px no-repeat}
#menu .nav5 {background:url(images/menu_bg5.gif) top repeat-x #6b110f}
#menu .nav5 a {background:url(images/menu_marker5.gif) 21px 18px no-repeat}
#menu .nav6 {background:url(images/menu_bg6.gif) top repeat-x #3f0f6b}
#menu .nav6 a {background:url(images/menu_marker6.gif) 21px 18px no-repeat}
#menu .nav7 {background:url(images/menu_bg7.gif) top repeat-x #ff7900}
#menu .nav7 a {background:url(images/menu_marker7.gif) 21px 18px no-repeat}
#menu .nav8 {background:url(images/menu_bg8.gif) top repeat-x #1376c9}
#menu .nav8 a {background:url(images/menu_marker8.gif) 21px 18px no-repeat}

我的菜单.PHP

<nav>
    <ul id="menu">
        <li class="nav1" ><a href="http://localhost/wordpress/">What We Can Help? </a></li>
        <li class="nav2"><a href="http://localhost/wordpress/repossession/">Repossession</a></li>
        <li class="nav3"><a href="http://localhost/wordpress/financial-difficulties/">Financial Difficulties</a></li>
        <li class="nav4"><a href="http://localhost/wordpress/broken-chain/">Broken Chain</a></li>
        <li class="nav5"><a href="http://localhost/wordpress/moving-abroad/">Moving Abroad </a></li>
        <li class="nav7"><a href="http://localhost/wordpress/divorce/">Divorce </a></li>
        <li class="nav8"><a href="http://localhost/wordpress/probate/">Probate </a></li>
        <li class="nav6"><a href="http://localhost/wordpress/disengagement/">Disengagement </a></li>
    </ul>
</nav>

2 个答案:

答案 0 :(得分:2)

因为它是一个静态菜单而且(我猜是)你硬编码了你的菜单,所以课程current_page_item没有通过WordPress显示。你需要自己测试一下。

由于您手动创建菜单,因此您需要使用每个菜单项手动检查当前页面:

<nav>
  <ul id="menu">
    <li class="nav1 <?php if (is_front_page()) echo 'current_page_item'; ?>"><a href="http://localhost/wordpress/">What We Can Help? </a></li>
    <li class="nav2 <?php if (is_page('repossession')) echo 'current_page_item'; ?>"><a href="http://localhost/wordpress/repossession/">Repossession</a></li>
    /* repeat for each page */
  </ul>
</nav>

答案 1 :(得分:0)

您是否尝试过为菜单链接使用“有效”状态?例如:

#menu .nav1 a.active {}
#menu .nav2 a.active {}
#menu .nav3 a.active {}

#menu .nav1 a:active {}
#menu .nav2 a:active {}
#menu .nav3 a:active {}