单击锚定应该执行javascript，而不是转到新页面

我有一个HTML锚，当单击时，应该使div向上或向下滑动（我调用JQuery的

.slideToggle（）；

函数）

我的问题：当我点击链接，而不是执行代码时，它会进入一个新页面，其中url是javascript代码，在我的例子中，“

javascript:$（'#attachFileContainer'）。slideToggle（）；

”，页面（主体）的内容只是“

[对象]

”

我的代码：

<a class="interactiveLink" 
     href="javascript: $('#attachFileContainer').slideToggle();">Attach File</a>

出了什么问题，我有很多锚元素，我从href属性调用javascript，但这从未发生过？

您想要这样：

<a class="interactiveLink" onclick="$('#attachFileContainer').slideToggle(); return false;" href="#">Attach File</a>

---

返回false

会阻止链接在运行

onclick

之后执行任何操作。

请尝试下面的方法，而不是编写内联JavaScript代码。preventDefault方法阻止元素的默认操作。在您的情况下，它会阻止单击事件的默认操作，即转到新页面

$(".interactiveLink").on("click", function(e){
   e.preventDefault();
   $('#attachFileContainer').slideToggle();
});

将您的html代码设置为

<a class="interactiveLink" href="##">Attach File</a>

---

带有href的A元素是链接，而不是锚（锚是带有name属性的元素，是链接的目标）

由于该元素既没有用作链接也没有用作目标，因此您根本不应该使用a元素，而是使用按钮或样式化的范围。这样，您就不必担心链接的默认行为

<button class="interactiveLink" onclick="
  $('#attachFileContainer').slideToggle();
">Attach File</button>

附加文件

或

附加文件

我看到很多答案都涉及到解决办法，但没有一个能触及问题的核心。你所做的事情背后的原因是不起作用，以及为什么它经常起作用

您正在使用

javascript:XXX

作为锚标记上的href、超文本源链接属性的值。其中，

XXX

是一段javascript代码，一个表达式，例如函数调用

使用此符号时，首先计算

XXX

代码。如果表达式产生一个值，那么大多数浏览器将清除页面并仅显示结果值

比如说,

将导致显示

2

类似地，这可以用函数重写以产生相同的结果：

function addTwo() {
    return 1+1; 
}

（预期输出

2

）

对于大多数浏览器，如果对

XXX

代码进行求值，并且没有得到值，那么它就没有什么可显示的了——因此，它将保持在同一页面上。所以，有几种方法可以实现这种行为

• 我们可以将结果分配给一个变量

分配期间没有剩余结果

• 我们可以包装另一个函数，该函数不返回任何内容

A

最后，如果您的函数或表达式不需要返回任何内容，请不要在该函数中执行此操作

总之：

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

<a href="#.">Click me</a>

<a href="javascript:void(0);">Click me</a>

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

<a href="javascript://">Click me</a>

---

单击使用

javascript:

href的锚点时，首先计算

javascript:

之后的javascript代码，如果它产生一个值，浏览器将只显示结果，否则浏览器将停留在当前所在的页面上，因为它没有值可显示。

解决方案1:

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

<a href="#.">Click me</a>

<a href="javascript:void(0);">Click me</a>

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

<a href="javascript://">Click me</a>

HTML:

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

<a href="#.">Click me</a>

<a href="javascript:void(0);">Click me</a>

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

<a href="javascript://">Click me</a>

---

解决方案2:

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

<a href="#.">Click me</a>

<a href="javascript:void(0);">Click me</a>

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

<a href="javascript://">Click me</a>

HTML:

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

<a href="#.">Click me</a>

<a href="javascript:void(0);">Click me</a>

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

<a href="javascript://">Click me</a>

---

解决方案5:

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

<a href="#.">Click me</a>

<a href="javascript:void(0);">Click me</a>

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

<a href="javascript://">Click me</a>

HTML:

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        event.preventDefault();
    }); 
});

<a href="#.">Click me</a>

<a href="javascript:void(0);">Click me</a>

<a href="#">Click me</a>

$(function(){
    $("a").click(function(event){
        return false;
    }); 
});

<a href="javascript://">Click me</a>

不需要A元素时，不要使用A元素。使用更合适的元素，如按钮或带样式的范围。通常的做法是将

元素称为锚元素，而不管它是否用于定义超链接，即超链接的命名目标，或者两者兼而有之。只是因为链接的名字经常出现错误并不意味着我必须加入暴徒。：-）这是一个技术论坛，应该使用技术上正确的术语。好吧，即使是专家也会不同意你的观点。因为链接有两个锚：源和目标。在这两种情况下，它们都被称为锚。所有

元素都称为锚点。