使用 Jquery 根据 body Id 添加/删除类答案

【问题标题】：Using Jquery to add/remove a class based on body Id使用 Jquery 根据 body Id 添加/删除类
【发布时间】：2009-12-17 21:30:14
【问题描述】：

我不是 javascript 大师，但我需要创建一个脚本来完成以下内容。

如果 body id="index" 添加类"current-selected" 到锚标签 where href=index.php 如果 body id="services" 添加 class="current-selected" 到锚标记 where href=services.php 等等

这有意义吗？有人可以帮忙吗？

谢谢！

Abbotsford Web Design

【问题讨论】：

欢迎来到 StackOverflow。第一个问题好！

标签： jquery jquery-selectors

【解决方案1】：

这样的事情应该可以解决问题。这将动态确定您的正文元素 ID 并更改所有引用同名 php 文件的锚标记。

var bodyID = $("body").attr("id");

$("a[href='" + bodyID + ".php']").addClass("current-selected");

如另一条评论所述，使用.removeClass("current-selected") 函数完成反向操作。

此外，如果您的 URL 仅以“index.php”结束，即 href 属性类似于“/something/index.php”，请使用“a[href$='" + bodyID + ".php']”作为您的选择器。这将匹配以文件名结尾的 href 值。

【讨论】：

提问者输入“等”。在他的问题中，所以我假设他不仅仅是两个身体 ID 示例。

【解决方案2】：

以Using Jquery to add/remove a class based on body Id 为基础：

var bodyID = $('body').attr('id');

$("a[href$='" + bodyID + ".php']").toggleClass('current-selected'); //add/remove

或

$("a[href$='" + bodyID + ".php']").addClass('current-selected'); //add

我们使用“$=”（指“href$=”）语法来匹配字符串的结尾，而不是“=”，因此“index.php”和“/index.php”都将是由“index.php”匹配。

要在您的网站上实现它，您需要在 jQuery 就绪函数中运行上述代码，以便在 Javascript 对其执行操作之前加载脚本块下方的所有 HTML：

编辑：这适用于您网站的所有主/顶部导航链接（匹配 href 的字符串是 URL 的最后一个路径段）：

<script type="text/javascript">
$(document).ready(function(){
    page = window.location.pathname.substring(1).replace(/\//g,'');
    $("a[href*='" + page + "']").addClass('current-selected');
});
</script>

【讨论】：

我对Java一无所知，所以感谢您的帮助。我已将此脚本添加到此页面 fraservalley-webdesign.com/index.php 的标题中。我有 body id 和 href 排队，但它不工作。你有什么想法吗？
谢谢。我一直在玩弄它，仍然没有运气。
好的，我知道了。您的页脚链接有效：它们的链接没有前导斜杠，只有“index.php”。标题链接类似于“/index.php”。我上面答案中的解决方案 ($("a[href$='" + bodyID + ".php']").toggleClass('current-selected');)
感谢您的帮助，但我似乎仍然无法完成这项工作。我已经完全复制并粘贴了您的代码，但没有运气。
代码在 HTML 加载之前触发。请参阅我的答案底部以获取替换代码。

【解决方案3】：

假设您的正文 ID 并不总是与其相应链接的文件名完美匹配，您可以这样做。

$("body#index a[href='index.php']").addClass("current-selected");
$("body#service a[href='service.php']").addClass("current-selected");

如果您的正文 ID 始终与您相应的链接 href 值匹配，您可以先提取正文 ID，并将其用作 jQuery 选择器中的变量：

var body_id = $("body").attr("id");
$("a[href='"+body_id+".php']").addClass("current-selected");

【讨论】：

反之为.removeClass("current-selected")（因为它在问题标题中）
我已将此脚本添加到标题中，稍后我会将其分离到单独的文件中，但没有任何成功。我正在使用的网站的链接是fraservalley-webdesign.com/index.php。有什么想法吗？
Ben，我刚刚针对您的网站运行了第一个示例，它运行良好。
我也尝试了第二个，它也按预期工作。我建议您重新检查在项目中粘贴代码的位置，然后重试 - 它应该可以工作。
我一定很厚，对不起。你有我可以看的例子吗？

【解决方案4】：

$('body#index a[href="index.php"]').addClass("current-selected");
$('body#services a[href="services.php"]').addClass("current-selected");

【讨论】：