javascript - 空 href 不适用于 javascript

Question

我在论坛上搜索了这个问题，但找不到解决我问题的方法。如果我遗漏了什么，请指出正确的主题。

我有三个在点击时相互替换的 div。

这是我的 HTML:

<div id="a">AAAA <a id="showa" href="javascript:void(0)">Show A</a></div>
<div id="b">BBBB <a id="showb" href="javascript:void(0)">Show B</a></div>
<div id="c">CCC <a id="showc" href="javascript:void(0)">Show C</a></div>

我正在使用这个 javascript 来实现这个:

function ReplaceDivs(a,b,c){
    $("#showa").on('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    $("#b").show();
    $("#a").hide();
    $("#c").hide();
});

$("#showb").on('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    $("#c").show();
    $("#b").hide();
    $("#a").hide();
});

$("#showc").on('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    $("#a").show();
    $("#b").hide();
    $("#c").hide();
});

我正在使用 preventDefault，我也尝试通过输入 javascript:void(0) 进入，但我的代码仍然无法正常工作。

当我在 fiddle 上测试它时，它工作没有问题。

可以看我的例子here

可以看到实际页面here

我错过了什么？

此外，我想知道是否有一种方法可以添加动画，以便 divs 显示/隐藏得更好。这是我第一次使用 JavaScript，所以我真的不知道从哪里开始。

Answer 1

您实际页面上的代码是<a id="showa" href="">Show A</a> .一片空白href等于指向自身的链接。你需要这个:

<a href="javascript:;"></a>

这是没有操作的链接的首选方式。