Question

I have this little issue here with my page, where if I reload it while being anchored, the anchor remains and there is a problem to it. I.E

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

The anchor is #mod1, and while the anchor remains active after refresh, my CSS code is saying that this element:

.overlay:target

is active. Which is a very big issue, because then it doesn't allow me to explore the functionallity I have implemented on this anchor, unless I remove the #mod1 from the end of the page manually by hand. Because this CSS element makes this div visible when it should be not unless activated with the a href element.

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

Any ideas on how could I solve it? I tried catching whether the user has refreshed the page and redirecting him to an action/route/url, but the page stays blank then and URL unchanged.

Answer 1

您不能将href与angularJS一起使用，因为它会误导目标链接。 AngularJS是HTML的标记语言，它不是HTML。因为angularJS不是HTML，我们提供了一组特殊的指令来将angularJS值内联写入HTML标记。解决问题的答案是使用angularJS指令ngHref替换anchor元素中的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替换为 - ＆gt; 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;
});

<a href=""> Anchor remains in URL and in page after refreshing

2 个答案: