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>

＆＃13;

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";
}

＆＃13;

.CatDiv {
  display: none;
}

＆＃13;

<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>

＆＃13;

我错过了什么？

Answer 1

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

如果仍然无效，请将方法附加到window对象。另外，我不推荐这种方法，你应该在你的Javascript中通过使用ID来定位你的DOM元素并从这里添加你的事件监听器来处理它。

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

Answer 2

一切都比你想象的容易。在你的标签中你得到了＆＃34; href＆＃34;用空参数。它会在按下它的同时重新加载页面。所以你要做的就是写＃34;＃＆＃34;作为参数。

<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应用程序中编写一些coffeescript时遇到了这个问题。 Another answer帮助了我。

解决方案是event.preventDefault()，如下所示：

应用程序/视图/帖/ 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>

应用程序/资产/ Javascript角/ 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;

Div不会保持可见

5 个答案: