js下拉菜单的实现

来源:互联网 发布:扬州玉器加工厂 知乎 编辑:程序博客网 时间:2024/05/01 08:28
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px; padding:0px; font-size:12px}
a{display:block; background:url(img/bg2.gif); width:150px; height:25px; text-decoration:none; padding-top:10px; margin:2px}
.s{width:150px; height:150px; border:#309 1px solid; margin:2px; display:none}
</style>
<script language="javascript">
function showDiv(thisDiv){
var e = document.getElementById("d").getElementsByTagName("div");
if(document.getElementById(thisDiv).style.display == "block"){
document.getElementById(thisDiv).style.display = "none";
} else {
for(i=0; i<e.length; i++){
e[i].style.display = "none";
}
document.getElementById(thisDiv).style.display = "block";
}
}
</script>
</head>
<body>
<div id="d" align="center">
<a href="#" onclick="showDiv('d1')">公司介绍</a>
<div class="s" id="d1">公司介绍</div>
<a href="#" onclick="showDiv('d2')">产品介绍</a>
<div class="s" id="d2">产品介绍</div>
<a href="#" onclick="showDiv('d3')">公司文化</a>
<div class="s" id="d3">公司文化</div>
<a href="#" onclick="showDiv('d4')">公司活动</a>
<div class="s" id="d4">公司活动</div>
<a href="#" onclick="showDiv('d5')">留言内容</a>
<div class="s" id="d5">留言内容</div>
</div>
</body>
</html>
0 0
原创粉丝点击