logo标签列表

锚点标签列表创建

javascripthtmlmysqlanchor
6
我正在从 MySQL/PHP 查询创建一个锚点列表；这些锚点调用 JavaScript 函数。
然而，我遇到了“进退两难”的问题：
  • href="#" 会使页面在每次单击某个锚点时跳转到顶部（非常让人烦恼）；
  • 删除 href="#" 则意味着鼠标悬停在锚点上时不会改变光标形状，也没有锚点的外观。
我知道有一种方法可以使用 JavaScript（可能是 jQuery）来解决此问题，但我现在不记得了。然而，我更喜欢一种更简单的 HTML 解决方案（如果存在的话），它不需要我涉及到 JavaScript。
编辑：
“不需要我涉足 JavaScript” == “不需要进行大量的 JavaScript 更改”。
如果需要的话（以及其他悬停样式），您可以在<a>标签上设置“cursor：pointer;”。不过这是CSS，而不是HTML。 - TylerH
5个回答
4
在你的 JavaScript 函数中，你应该使用 return false，或者使用 jQuery 中的 preventDefault() 方法。
示例：
$('a').click(function(event) {
    event.preventDefault();
    // do something
});

在您的情况下：
<a href=“#” onclick="foo();return false;">

或者将 href 改为 javascript:void(0)：

<a href="javascript:void(0)" onclick="foo();">

理想情况下，您的链接在没有JavaScript的情况下也能正常访问，因此通常会避免使用第三个选项。
3

一个更简单的HTML修复方法：就我个人而言，对于普通文本链接，我只使用href = ""

对于指向JavaScript函数的链接，我倾向于使用href="javascript:;"。无论哪种方式，都可以防止页面跳转。

1

你需要在点击事件处理程序中的某个位置调用 event.preventDefault();。在原生 JavaScript 中，可以这样做：

<script type="text/javascript">
  function foo(e) {
    e.preventDefault();
    // other code
  }
</script>
<a href="#" onclick="foo(e);"></a>

此外，您也可以返回 false:
<a href="#" onclick="foo();return false;/>

这也可以在jQuery中非常简单地完成：

$('.mylink').click(function(e) {
  e.preventDefault();
  // other code
});

使用return false;的缺点是它也会阻止事件冒泡到DOM。如果您不关心事件冒泡，那么使用false就可以了，但个人认为最好使用event.preventDefault();，除非您特别想停止事件冒泡。
嘿，我甚至没有意识到preventDefault()是普通的Javascript - 这表明我一直以来都依赖于jQuery作为我的支撑！+1 很好的解释。 - Wesley Murch
jQuery确实传递了自己的事件对象，但这只是为了帮助在不同浏览器上进行规范化。 - scurker
1
在 onclick 中或者 foo() 函数内部，执行 return false。
0
<html>
    <head>

    </head>
    <body>
    <style>
    a {
        text-decoration: underline;
    }
    a:hover {
        text-decoration: underline;
    }
    </style>
    <script type="text/javascript">
      function foo() {
        alert('Hello World');
      }
    </script>
    <a onclick="foo();">Click Here</a>
    </body>
    </html>

只需添加CSS并删除href即可。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接