[英]Simple Onclick Javascript Drop Down Navigation without using switch / tab
Pretty new to using Javascript.使用 Javascript 很新。 Would like to avoid using Jquery or other frameworks.
想避免使用 Jquery 或其他框架。
This is a simple drop down navigation I'm trying to create using a script I found here: http://blog.movalog.com/a/javascript-toggle-visibility/这是一个简单的下拉导航,我正在尝试使用我在这里找到的脚本创建:http: //blog.movalog.com/a/javascript-toggle-visibility/
I could use some help cleaning up some code, and for some pointers.我可以使用一些帮助来清理一些代码和一些指针。 It works the way I need it, but would like to shorten it up a bit.
它按我需要的方式工作,但想缩短一点。 Thanks.
谢谢。
HTML: HTML:
<div id="dropMenu">
<ul>
<li><a href="#" onclick="showhide1(d1);">Advanced AGM</a>
</li>
<li><a href="#" onclick="showhide2(d2);">Lithium-ION</a>
</li>
<li><a href="#" onclick="showhide3(d3);">Chargers</a>
</li>
<li><a href="#" onclick="showhide4(d4);">Mounts</a>
</li>
<li><a href="#" onclick="showhide5(d5);">Accessories</a>
</li>
</ul>
</div>
<div id="d1" class="dropContent" style="display:none;">
This is Content 1.
</div>
<div id="d2" class="dropContent" style="display:none;">
This is Content 2.
</div>
<div id="d3" class="dropContent" style="display:none;">
This is Content 3.
</div>
<div id="d4" class="dropContent" style="display:none;">
This is Content 4.
</div>
<div id="d5" class="dropContent" style="display:none;">
This is Content 5.
</div>
Javascript: Javascript:
<script type="text/javascript">
function hide(){
d1.style.display = 'none',
d2.style.display = 'none',
d3.style.display = 'none',
d4.style.display = 'none',
d5.style.display = 'none';
}
function showhide1() {
document.getElementById(d1);
if(d1.style.display == 'block')
hide();
else
d1.style.display = 'block',
d2.style.display = 'none',
d3.style.display = 'none',
d4.style.display = 'none',
d5.style.display = 'none';
}
function showhide2() {
document.getElementById(d2);
if(d2.style.display == 'block')
hide();
else
d2.style.display = 'block',
d1.style.display = 'none',
d3.style.display = 'none',
d4.style.display = 'none',
d5.style.display = 'none';
}
function showhide3() {
document.getElementById(d3);
if(d3.style.display == 'block')
hide();
else
d1.style.display = 'none',
d2.style.display = 'none',
d3.style.display = 'block',
d4.style.display = 'none',
d5.style.display = 'none';
}
function showhide4() {
document.getElementById(d4);
if(d4.style.display == 'block')
hide();
else
d1.style.display = 'none',
d2.style.display = 'none',
d3.style.display = 'none',
d4.style.display = 'block',
d5.style.display = 'none';
}
function showhide5() {
document.getElementById(d5);
if(d5.style.display == 'block')
hide();
else
d1.style.display = 'none',
d2.style.display = 'none',
d3.style.display = 'none',
d4.style.display = 'none',
d5.style.display = 'block';
}
</script>
function showhide(obj) {
document.getElementById('d1').style.display = 'none';
document.getElementById('d2').style.display = 'none';
document.getElementById('d3').style.display = 'none';
document.getElementById('d4').style.display = 'none';
document.getElementById('d5').style.display = 'none';
document.getElementById(obj).style.display = 'block';
}
<div id="dropMenu">
<ul>
<li><a href="#" onclick="showhide('d1');">Advanced AGM</a>
</li>
<li><a href="#" onclick="showhide('d2');">Lithium-ION</a>
</li>
<li><a href="#" onclick="showhide('d3');">Chargers</a>
</li>
<li><a href="#" onclick="showhide('d4');">Mounts</a>
</li>
<li><a href="#" onclick="showhide('d5');">Accessories</a>
</li>
</ul>
</div>
<div id="d1" class="dropContent" style="display:block;">
This is Content 1.
</div>
<div id="d2" class="dropContent" style="display:none;">
This is Content 2.
</div>
<div id="d3" class="dropContent" style="display:none;">
This is Content 3.
</div>
<div id="d4" class="dropContent" style="display:none;">
This is Content 4.
</div>
<div id="d5" class="dropContent" style="display:none;">
This is Content 5.
</div>
Hope it help希望有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.