1

我正在尝试获取下面的代码以始终突出显示我正在处理的主题的当前页面，但它什么也没做。HTML 部分如下脚本所示。有关修复的任何建议或解决方案。

<script type="text/javascript">
    var url = window.location.href;
    url = url.substr(url.lastIndexOf("/") + 1);
    $("#navbar").find("a[href='" + url + "']").addClass("current");
</script>

<div id="navbar">
    <ul>
        <li><a href="index.php">home</a></li>
        <li><a href="services/">services</a></li>
        <li><a href="procedure/">procedure</a></li>
        <li><a href="about-us/">about</a></li>
        <li><a href="contact-us/">contact</a></li>
    </ul>
</div>
4

2 回答 2

1

您需要查看WP Nav Menu。

我猜这是您正在开发的主题？如果是这样，请在您的 functions.php 文件中注册一个导航菜单。这将允许您在 Wordpress 仪表板（外观->菜单）中定义您的菜单，并根据您的喜好对其进行自定义。

我建议这样做的原因是，它不仅可以让您以非常直观的方式完全控制菜单，而且还可以自动定义样式表可能需要的所有类（包括当前项目和祖先）。

这是您可以使用的最干净的选择。您还可以查看WP List Pages以获取类似（尽管更有限）的解决方案。

否则，你将不得不做一些像这样肮脏的事情：

<?php
$id = get_the_ID();
$class = ' class="current"';
?>
<ul>
    <li<?php echo is_home() ? $class : ''; ?>><a href="<?php echo home_url(); ?>">home</a></li>
    <li<?php echo $id==$serives_ID ? $class : ''; ?>><a href="<?php echo get_permalink($serives_ID); ?>">services</a></li>
    <li<?php echo $id==$procedure_ID ? $class : ''; ?>><a href="<?php echo get_permalink($procedure_ID ); ?>">procedure</a></li>
    <li<?php echo $id==$about_ID ? $class : ''; ?>><a href="<?php echo get_permalink($about_ID); ?>">about</a></li>
    <li<?php echo $id==$contact_ID ? $class : ''; ?>><a href="<?php echo get_permalink($contact_ID); ?>">contact</a></li>
</ul>

将 $services_ID、$procedure_ID 等替换为它们各自的页面 ID，如果当前 ID 与其中任何一个匹配，则该项目将应用一个“当前”类，然后您可以在样式表中定位它。

我建议使用服务器端解决方案而不是使用任何类型的 jQuery 的主要原因是，这不是一个专门适合 jQuery 本身的任务。

虽然 jQuery 库是一个强大的工具，但 Wordpress 具有您需要检测在此实例中要检测的所有内容所需的所有内置功能。在让客户端的浏览器接管之前，让服务器做尽可能多的工作。否则，您将看到一些严重的加载时间。

更新： 根据您的最后评论，如果您打算采用凌乱的方式并且不想为查找页面 ID 而烦恼，您也可以这样做：

<?php
$slugs = array('services', 'procedure', 'about-us', 'contact-us');
?>
<ul>
    <li<?php echo is_home() ? ' class="current"' : ''; ?>><a href="<?php echo home_url(); ?>">home</a></li>
    <?php
    foreach($slugs as $slug)
    {
        $page = get_page_by_path($slug);
        $class = is_page($slug) ? ' class="current"' : '';
        echo '<li'.$class.'><a href="'.get_permalink($page->ID).'">'.str_replace('-us','',$slug).'</a></li>';
    }
    ?>
</ul>

基于最后评论的更新：

现在您正在使用 wp_nav_menu，您可以使用 CSS 定位当前菜单项。这是一个将当前项目的背景变为红色的示例：

<style type="text/css">
.current-menu-item{background:#F00;}
</style>

Apply these rules either in your header, or preferably in your main style.css file. Good luck!

于 2012-06-01T00:38:06.367 回答
0

您的 substr 正在使用 / +1 的 lastindex。html 中显示的链接末尾有 /。我想这两者是互斥的，因为以 / 结尾的 s 字符串总是会返回一个带有该 substr 的空字符串。

于 2012-06-01T00:20:46.463 回答