Question

我几乎尝试了从这个网站和其他网站找到的所有解决方案，但没有成功。我正在做的是使用CSS3动画旋转按钮。我这样做是通过链接按钮（使用“a”元素）然后使用伪元素启用动画：target（在这种情况下几乎等于onclick事件）。

我的问题是，当我第一次点击按钮时，会在网址中添加一个哈希标记（在我的情况下为＃btnq1）。

现在，实际问题是，当我重新加载整个页面或者我想再次点击该按钮并重新运行动画时，我无法删除此哈希标记。我尝试了一些Stackoverflow问题的解决方案，例如this或this，但没有得到任何好结果。

见下面我的代码：

您可以忽略名为q1的动画的初始阶段。 HTML代码：

<header>
<div id="title">
Just a title
</div>
</header>

<main>
Not important text

<div id="q1">
<div class="q1once">
<a href="#btnq1"><button type="button" name="" value="" id="btnq1">Click to rotate</button></a>
</div>
</div>
</main>

CSS代码：

#q1{
    height:100%;
    }

.q1once{
    width:20%;
    height:15%;
    position:absolute;
    left:-50%;
    animation-name:q1;
    animation-delay:3s;
    animation-iteration-count:1;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    }

#btnq1:target{
    animation-name:q1leave;
    animation-iteration-count:1;
    animation-duration:4s;      
    }

@keyframes q1{
50%{
    transform:translate(440%) scaleX(3);
    }
100%{
    transform:translate(450%) scale(1.5,2);
    }
}
@keyframes q1leave{
    0%{transform:rotate(0deg);
        opacity:1;
        }
    100%{
        opacity:0;
        transform:rotate(360deg);
        }

}

您也可以查看我的updated jsfiddle。

在页面加载时添加window.location.hash=''是一个很好的部分解决方案，因为它在我重新加载页面时删除了＃标签。但是，在第一次单击按钮后，它不会删除主题标签。我希望这种情况发生，以便能够多次旋转按钮。

Answer 1

试试这个

$('#btnq1').click(function(event){
   event.preventDefault();
   // your action
});

不再添加Hashtags

Answer 2

添加以下解决了我的问题：

$(window).on('hashchange', function(e){
    history.replaceState ("", document.title, e.originalEvent.oldURL);
});

从另一个question找到。

Answer 3

要清除页面加载时的哈希值，您可以添加：

<script>
window.onload = function() { window.location.hash = ''; };
</script>

现在，如果您还想在单击按钮时清除它，我们只需在按钮上添加一个onclick事件：

<a href="#btnq1" onclick="window.location.hash = ''">...

点击事件后无法从网址中删除主题标签

3 个答案: