javascript - current_page_item 无法在 wordpress 中使用静态菜单

标签 javascript jquery html css wordpress

CSS 样式

#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>

最佳答案

因为它是一个静态菜单并且(我猜)您对菜单进行了硬编码,所以 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>

关于javascript - current_page_item 无法在 wordpress 中使用静态菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6487948/

相关文章:

javascript - 页面通过表单验证后未重定向到 strip 结帐

html - Bravenet 留言簿 CSS

javascript - Jquery表单验证ajax

javascript - 如何连接可拖动的div

javascript 在数组中查找对象名称

javascript - javascript中输入类型时间的值

javascript - jQuery - 检查复选框并禁用其他(如果有不同的值)

javascript - accordion+tab = 之前的内容不消失

javascript - 将 JS 应用到页面加载后创建的表上

javascript - 如何在数据表行和列中采用 intro.js 的流程?