<a href>刷新后，锚点仍保留在URL和页面中</a>

Question

我的页面在这里有一个小问题，如果我在锚定的同时重新加载它，则锚定仍然存在并且存在问题。 IE

http://localhost/public/product/1#mod1

锚点是＃mod1，刷新后锚点仍处于活动状态，而我的CSS代码则表示此元素：

.overlay:target

活跃。 这是一个很大的问题，因为除非我手动从页面末尾手动删除＃mod1，否则它不允许我探索在此锚点上实现的功能。 因为此CSS元素使该div在不应该显示时才可见，除非使用a href元素将其激活。

<a href="#mod{{$key}}" class="button">(?)</a>
<div id="mod{{$key}}" class="overlay">
    content
</div>

关于如何解决的任何想法？ 我尝试捕获用户是否刷新了页面并将其重定向到操作/路由/ URL，但是该页面保持空白，然后URL保持不变。

Answer 1

您不能将href与angularJS一起使用，因为它会误导目标链接。 AngularJS是HTML的标记语言，不是HTML。 由于angularJS不是HTML，因此我们提供了一组特殊的指令，可以将angularJS值内联地写入HTML标记。 解决您的问题的答案是用angularJS指令ngHref替换锚元素中的href标签。 您可以在下面的链接中找到有关如何使用ngHref和其他指令的更多信息。 祝好运。

https://docs.angularjs.org/api/ng/directive/ngHref

Answer 2

好吧，我想纯粹地在没有JS的情况下解决此问题，但是我的工作就是HTML：

<a ng-href="mod{{$key}}" class="button">(?)</a>
<div id="mod{{$key}}" class="overlay">

然后将overlay：target的CSS替换为-> overlay：active，并实现JS：

var curmod;
$('a.button').on('click', function(e)
{
    curmod = document.getElementById($(this).attr('ng-href'));
    $(curmod).addClass('active');
});
$('.popup a.close').on('click', function(e)
{
    $(curmod).removeClass('active');
    curmod = null;
});