Javascript Div不'；Don’我看不见

我有4个链接。单击第一个链接时，应显示div 1，隐藏其他3个链接。
当我单击链接2时，应该显示div 2，隐藏其他3，依此类推

我所做的：

• 使用CSS，我将4个div的类设置为

  display:none

• 使用javascript创建了4个函数，将正确div的display属性设置为

  block

  ，其他3个函数设置为

  none

• 单击链接时调用该函数

当我点击一个链接时，div会显示四分之一秒，但随后它又消失了

CSS:

JS功能：

function showKadoballonnen() {
    document.getElementById("Kadoballonnen").style.display = "block"
    document.getElementById("Geschenkmanden").style.display = "none"
    document.getElementById("Pampercadeaus").style.display = "none"
    document.getElementById("OrigineleVerpakkingen").style.display = "none";
}

<a href="" onclick="showKadoballonnen()">Kadoballonnen</a>

调用函数：

function showKadoballonnen() {
    document.getElementById("Kadoballonnen").style.display = "block"
    document.getElementById("Geschenkmanden").style.display = "none"
    document.getElementById("Pampercadeaus").style.display = "none"
    document.getElementById("OrigineleVerpakkingen").style.display = "none";
}

<a href="" onclick="showKadoballonnen()">Kadoballonnen</a>

.CatDiv{
显示：无；
}

试验
试验
试验
测试

我设法使它工作：

编辑

编辑了小提琴，现在可以通过按下按钮来操作。使用按钮比使用带有空

href

的锚点更好

HTML:

---

我设法使它工作：

编辑

编辑了小提琴，现在可以通过按下按钮来操作。使用按钮比使用带有空

href

的锚点更好

HTML:

---

您应该避免链接上的

href

属性为空。用按钮代替

如果仍然不起作用，请将方法附加到

窗口

对象。另外，我不推荐这种方法，您应该在Javascript中处理它，例如使用ID针对DOM元素，然后从这里添加事件侦听器

document.getElementById('myelement').addEventListener('click', showKadoBallonnen);

---

您应该避免链接上的

href

属性为空。用按钮代替

如果仍然不起作用，请将方法附加到

窗口

对象。另外，我不推荐这种方法，您应该在Javascript中处理它，例如使用ID针对DOM元素，然后从这里添加事件侦听器

document.getElementById('myelement').addEventListener('click', showKadoBallonnen);

---

一切都比你想象的容易。在标签中，您得到了带有空参数的“href”。它会使您的页面在按下时重新加载。 因此，您只需将“#”作为参数写入即可

<a href="#" onclick="showKadoballonnen()">Kadoballonnen</a>

---

一切都比你想象的简单。在标签中，您得到了带有空参数的“href”。它会使您的页面在按下时重新加载。 因此，您只需将“#”作为参数写入即可

<a href="#" onclick="showKadoballonnen()">Kadoballonnen</a>

---

您的代码中有一些错误，您还需要停止链接（

）触发

在你的链接上，添加

returnfalse：

<a href="#" onclick="showKadoballonnen(); return false;">Kadoballonnen</a>
    <!-- ^ Also, add href="#" so you don't have an empty href -->

代码中有一些错误，您还需要停止链接（
）触发

在你的链接上，添加
returnfalse：

<a href="#" onclick="showKadoballonnen(); return false;">Kadoballonnen</a>
    <!-- ^ Also, add href="#" so you don't have an empty href -->

我在rails应用程序中编写咖啡脚本时遇到了这个问题。帮助了我

解决方案是
事件.preventDefault（）
，如下所示：

app/views/posts/index.html.erb：

<%= link_to "Some link", '#', id: 'some-link' %>

<div class="some-div">
  <h4>Some list</h4>
  <ul id='some-list'>
    <li>cats</li>
    <li>and</li>
    <li>dogs</li>
  </ul>
</div>

我在rails应用程序中编写咖啡脚本时遇到了这个问题。帮助了我

解决方案是
事件.preventDefault（）
，如下所示：

app/views/posts/index.html.erb：

<%= link_to "Some link", '#', id: 'some-link' %>

<div class="some-div">
  <h4>Some list</h4>
  <ul id='some-list'>
    <li>cats</li>
    <li>and</li>
    <li>dogs</li>
  </ul>
</div>

你能提供更多的HTML/CSS吗？如果创建一个.divy3993的可能副本或使用堆栈溢出代码段，则更好，它是带有
的文档图标@有些东西我不在这里，OP.：-）你能提供更多的HTML/CSS吗？如果创建一个.divy3993的可能副本或使用堆栈溢出代码段，则更好，它是带有
的文档图标@有些东西我不是OP.：-）和我一样。。。第一次尝试使用它们，然后删除它们以检查是否存在问题。Thansk自动插入分号这不是问题所在@Hugo似乎很接近，但您可能只需要
返回false和我一样。。。第一次尝试使用它们，然后删除它们以检查是否存在问题。Thansk自动插入分号这不是问题所在@Hugo似乎很接近，但您可能只需要
返回falseonclick=“showkadoballonen（）；return false；”
来取消单击。Yes也找到了：-）thnx！事实上，这不是一个真正的问题。您应该执行
onclick=“showkadoballonen（）；return false；”
来取消单击。Yes也找到了：-）thnx！可能添加一点关于
preventDefault（）
，因为您显然在正确的轨道上。可能添加一点关于
preventDefault（）
，因为您显然在正确的轨道上。
$(document).on 'turbolinks:load', ->
  $('#some-link').click (event) ->
    event.preventDefault()
    $('#some-list').toggle()