Div 不可见

Question

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

我做了什么：

• 通过 CSS，我将 4 个 div 的类设置为 display: none

• 使用 javascript 创建了 4 个函数，将正确 div 的显示属性设置为 block，其他 3 个设置为 none

• 点击链接时调用函数

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

CSS：

.CatDiv {
    display:none;
}

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>

必须调用的Div：

<div id="Kadoballonnen" class="CatDiv">TEST</div>

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

.CatDiv {
  display: none;
}

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

<div id="Kadoballonnen" class="CatDiv">TEST</div>
<div id="Geschenkmanden" class="CatDiv">TEST</div>
<div id="Pampercadeaus" class="CatDiv">TEST</div>
<div id="OrigineleVerpakkingen" class="CatDiv">TEST</div>

我错过了什么？

Answer 1

您应该避免链接上的空href 属性。请改用按钮。

如果它仍然不起作用，请将您的方法附加到 window 对象。另外，我不推荐这种方法，您应该在您的 Javascript 中处理它，例如使用 ID 定位您的 DOM 元素并从此处添加您的事件侦听器。

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

Answer 2

一切都比你想象的要容易。在您的标签中，您得到带有空参数的“href”。它使您的页面在按下时重新加载。 所以你应该做的就是写“#”作为参数。

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

Answer 3

您的代码中有一些错误，您还需要停止链接 (<a>) 触发。

在您的链接上，添加return false;：

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

另外，在每行 javascript 的末尾添加分号：

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

Answer 4

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

解决办法是event.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>

app/assets/javascripts/posts.coffee：

$(document).on 'turbolinks:load', ->
  $('#some-link').click (event) ->
    event.preventDefault()
    $('#some-list').toggle()

Answer 5

我设法让它工作：https://jsfiddle.net/ke81koj6/

function showKadoBallonnen() {
    document.getElementById("one").style.display = "block";
    document.getElementById("two").style.display = "none";
    document.getElementById("three").style.display = "none";
    document.getElementById("four").style.display = "none";
}

编辑

编辑了小提琴，现在可以通过按下按钮来工作。最好使用按钮而不是带有空 href 的锚点。

HTML：

<button id="button" onclick="showKadoBallonnen()">click here</button>

JS：

document.getElementById("button").onclick = showKadoBallonnen;