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

Question

我有一个HTML锚点，点击它时会使div上下滑动（我称之为JQuery的.slideToggle();函数）;

我的问题：当我点击链接时，不是执行代码，而是转到新页面，其中网址是javascript代码，在我的情况下，“javascript: $('#attachFileContainer').slideToggle();”页面（正文）的内容只是“[object Object]”。

我的代码：

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

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

Answer 1

你想要这个：

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

return false阻止链接在onclick内容运行后执行任何操作。

Answer 2

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

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

将您的HTML代码设为

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

Answer 3

解决方案1：

<强> HTML：

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

<强> jQuery的：

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

---

解决方案2：

<强> HTML：

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

---

解决方案3：

<强> HTML：

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

---

解决方案4：

<强> HTML：

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

<强> jQuery的：

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

---

解决方案5：

<强> HTML：

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

Answer 4

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

由于元素未被用作链接或目标，因此您根本不应使用A元素，使用按钮或样式范围。然后，您无需担心链接的默认行为。

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

或

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

Answer 5

我看到很多涉及解决方案的答案，但没有一个能够解决问题的核心问题。你正在做的事情背后的为什么不起作用，为什么它经常起作用。

您使用javascript:XXX作为锚标记上的href，超文本源链接属性的值。其中XXX是一段javascript代码，表达式，例如函数调用。

使用此表示法时，首先评估XXX代码。如果表达式产生一个值，那么大多数浏览器将清除页面并仅显示结果值。

例如，

<a href="javascript:1+1">Click here!</a>会导致显示2。

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

function addTwo() {
    return 1+1; 
}

<a href="javascript:addTwo()">Click here!</a>（预期输出2）

对于大多数浏览器，如果XXX代码被评估并且没有产生值，则它没有任何内容可显示 - 因此，它将保留在同一页面上。因此，有几种方法可以实现这种行为。

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

<a href="javascript:var two = addTwo()">Click here!</a>

分配期间没有遗留任何结果。

• 我们可以包装另一个不返回此函数的函数。

一个。

function addTwo2() {
    addTwo();
}
<a href="javascript:addTwo2()">Click Here!</a>

B中。同样的事情，但所有内联：

<a href="javascript:(function() { addTwo();})()">Click Here!</a>

℃。同样的事情，但你会经常看到!成语。 （相同的逻辑含义，只使用not运算符来实现更少的字符）：

<a href="javascript:!function() { addTwo();}()">Click Here!</a>

• 我们可以在大多数函数式编程语言中执行所谓的挂钩：

  function addTwo() {     
      alert( "sfsf" );
      return 1+1; 
  }
  
  var x = addTwo;
  
  addTwo = function() {
      x();    
  }
  

  <a href="javascript:addTwo();">Click Here!</a>

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

总结如此：

当点击使用javascript: href的锚时，首先评估javascript:之后的javascript代码，如果它产生一个值，浏览器将仅显示结果，否则浏览器将继续它当前所在的页面，因为它没有值显示。