<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;
});