我有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";
}
&#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;
我错过了什么?
答案 0 :(得分:1)
您应该避免链接上的空href
属性。改为使用按钮。
如果仍然无效,请将方法附加到window
对象。另外,我不推荐这种方法,你应该在你的Javascript中通过使用ID来定位你的DOM元素并从这里添加你的事件监听器来处理它。
document.getElementById('myelement').addEventListener('click', showKadoBallonnen);
答案 1 :(得分:0)
一切都比你想象的容易。在你的标签中你得到了&#34; href&#34;用空参数。它会在按下它的同时重新加载页面。 所以你要做的就是写#34;#&#34;作为参数。
<a href="#" onclick="showKadoballonnen()">Kadoballonnen</a>
答案 2 :(得分:0)
您的代码中有一些错误,您还需要停止链接(<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";
答案 3 :(得分:0)
我在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()
答案 4 :(得分:-1)
我成功了: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;