简单的点击式Javascript下拉导航,无需使用开关/tab
Simple Onclick Javascript Drop Down Navigation without using switch / tab
使用Javascript还很新鲜。希望避免使用Jquery或其他框架。
这是一个简单的下拉导航,我正试图使用我在这里找到的脚本创建:http://blog.movalog.com/a/javascript-toggle-visibility/
我需要一些帮助来清理一些代码,并获取一些指针。它按我需要的方式工作,但我想把它缩短一点。谢谢
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:
<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>
Java脚本
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';
}
Html
<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>
希望它能帮助
相关文章:
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- AngularJS ng开关或类似的动态值工作
- 基于下拉菜单创建开关
- Javascript开关不工作
- 禁用Tab键以进行具有特定Div ID的输入
- Tab键不会't继续chrome/IE11中的表单字段
- 引导开关不工作
- 如何定义星期日和平日.按日期使用开关
- Javascript-iPad Tab键检测,带蓝牙键盘
- 捕捉TAB键按下键向上
- Javascript-使用“”将toDateStringMonth从文本字符串解析为数字字符串;如果“;vs“;开关”;
- 如何将事件处理程序分配给proto.io开关
- 更改javascript中的tab键行为
- /如何使用java脚本在safari浏览器中获取活动的Tab url
- Impress.Js正确使用Tab
- JavaScript 中的 if 语句与开关语句
- 将自定义HTML5/iframe小部件集成到Facebook Timeline/Tab页面中
- 在运行时启动jquery-ui.toggleSwitch.js切换开关
- 简单的点击式Javascript下拉导航,无需使用开关/tab
- Jquery带有下拉选择器的选项卡选择器,下拉选择器不匹配TAB开关