Question

我见过的一些网站会这样做。

我有像<a href="#delete">Delete</a>

这样的链接

然后显示div。这当然会将#delete添加到地址栏中URL的末尾。有没有办法仍然可以调用#delete但不将其添加到URL的末尾？

例如GitHub，在某些弹出式窗口中，您可以在左下方看到地址为https://github.com/settings/admin#delete_account_confirmation

但是当您按下链接时，它不会在网址中添加#delete_account_confirmation？但弹出窗口仍然显示。怎么样？

Answer 1

只需调用其点击事件preventDefault()方法

即可

＆＃13;

document.getElementById('preventAnchor').addEventListener('click', function(e){
   e.preventDefault();
   var anchor = this.href.split('#')[1];
   document.body.scrollTop = document.getElementById(anchor).offsetTop; // Comment me out if you don't want scroll to occur
})

＆＃13;

div, a{
  margin-bottom: 1000px;
  width:100%;
  float: left;
  display: block;
}

＆＃13;

<a href="#test" id="preventAnchor">Test</a>



<div id="test">test</div>

＆＃13;

回答弹出窗口如何显示的问题 - 通常这可以通过使用javascript来改变样式，方法是添加类或直接改变它的样式属性。有时他们也会在显示它们之前通过AJAX填充，甚至在点击链接时动态创建它们。有时保留锚链接是个好主意，这样有人可以直接打开对话框 - 想一想如果刷新页面或者打开弹出窗口给它添加书签 - 你可以让你的页面检查锚点并带走用户直接到那个特定的弹出窗口。

如果你想删除哈希值但仍然导航到锚点，你可以使用history.replaceState而不是preventDefault，它可以在大多数现代浏览器上运行，或者使用preventDefault并设置{{1}正如我在上面的示例中所述，后一种解决方案将与不支持历史记录API的旧浏览器更兼容。

Answer 2

为了防止它作为链接打开，正在使用名为preventDefault的东西：

$("a.popup").on("click", function(e) {
   e.preventDefault();

   // Your code here

});

Answer 3

$( '#a_id' ).click( function( e ) {
  
  e.preventDefault();
  
  $('html, body').animate({
        scrollTop: $( "#div_id" ).offset().top
    }, 1000);
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#div_id" id="a_id">click to go to div</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="div_id">this is div</div>

检查这可以是任何帮助。

Answer 4

SELECT

更改为

<a href="#delete">Delete</a>

或

<a href="javascript:void(0)">Delete</a>

单击包含链接的链接时，不要将URL标签添加到URL

4 个答案: