Question

我创建了此页面：http://ikwebdesigner.com/special-characters/

当您点击顶部导航时，它会将您带到同一页面中的某个位置。我需要导航链接才能保持突出显示，直到我点击顶部导航中的其他链接。我已经知道CSS ：focus 了。但是当我点击其他地方时，焦点风格就会消失。

过去几个月我搜索过这个网站和谷歌，而我所得到的只是外部网页的当前链接突出显示。我已经知道如何使用PHP来做到这一点。我不知道该怎么做才能使同一页面上的活动链接在点击后保持突出显示。

我需要一些东西，可能是jQuery，它会添加一个 .active 类，所以我可以设置它的样式。并且链接应保持该颜色，直到我单击该组中的另一个链接。

我已经在一些网站上看到过这种情况，我打开代码并尝试复制它，但它对我不起作用。我想知道是否有人可以帮助我。

如果突出显示/活动链接可能会根据我所处的不同部分而改变，那么奖励积分也将是一个非常好的加分。我也见过这个。

我使用了很多jQuery，所以也许jQuery中的东西最好。提前致谢。但是，我不知道jquery或javascript。我不知道怎么写。我通常只是找到某人的代码/教程。在这种情况下，我无法找到这样的东西。

Answer 1

我找到了我在这里寻找的东西。这正是我所需要的：这是一个更好的解释：http://lineswritten.co.uk/newsite/tips/jquery-how-to-highlight-an-active-anchor-tag-on-a-one-page-website/

您可以将锚标记更改为您喜欢的任何类或元素。

<script>
$(function () {
$(".somelink a").click(function (e) {
e.preventDefault();
$(".somelink a").addClass("active").not(this).removeClass("active");
});
});
</script>

HTML

<ul class="somelink">
<li><a href="#">Sample Anchor</a></li>
<li><a href="#">Sample Anchor</a></li>
</ul>

它对HTML执行此操作：

<ul class="somelink">
<li><a href="#" class="active">Sample Anchor</a></li>
<li><a href="#">Sample Anchor</a></li>
</ul>

CSS：

.active { background-color: #ffffcc}

Answer 2

我看到你有一个页面，你使用锚点来移动它。如果我找到你的话，现在有一个突出显示活动部分的菜单就是你想要的。

你可以用jquery以各种方式完成它。

一种方法是在隐藏字段中记录所选索引，并在每次单击时更改值。然后检查隐藏字段的值，并在每个菜单点击或页面加载时将样式应用于菜单项，但是你可以处理它。

我想到的另一个选择是检查每次更改的URL路径。从中获取锚ID并将样式应用于具有与其对应的id的元素。

希望这会给你一个想法。

如何让我的重点链接保持突出显示

2 个答案: