DHTML技术综合演示---示例:下拉风格的菜单条2--用表格封装的

最新推荐文章于 2022-07-06 09:31:12 发布

大z小z

最新推荐文章于 2022-07-06 09:31:12 发布

阅读量516

点赞数

分类专栏： dhtml 文章标签： dhtml

本文链接：https://blog.csdn.net/qq_36171618/article/details/71921270

版权

dhtml 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DHTML技术综合演示---示例:下拉风格的菜单条2--用表格封装的</title>
<style type="text/css">

table{
border:#00ff80 solid 1px;
width:150px;
}

table td{
border:#800040 solid 2px;
}

td ul{
list-style:none;
display:none;
padding:5px;
margin:0px;
}

a:link, a:visited{//设置为元素加载器的时候要考虑优先级
color:red;
background-color:#ff80ff;
text-decoration:none;
}

a:hover{
color:#000000;
background-color:#ffff00;
}

/*为菜单的动态风格添加两个预定义的类样式*/
.open{
display:block;
}
.close{
display:none;
}

</style>
<script type="text/javascript">
function list(oANode){
var oTdNode = oANode.parentNode;
var oUlNode =oTdNode.getElementsByTagName("ul")[0];
if(oUlNode.className=="open"){
oUlNode.className="close";
}else{//close和初始化时的没有赋值都属于这种情况
oUlNode.className="open";
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单1</a>

<ul>
<li>一个好友a</li>
<li>一个好友b</li>
<li>一个好友c</li>
<li>一个好友d</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单2</a>
<ul>
<li>一个好友aa</li>
<li>一个好友ab</li>
<li>一个好友ac</li>
<li>一个好友ad</li>
</ul>
</td>

</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单3</a>
<ul>
<li>一个好友ba</li>
<li>一个好友bb</li>
<li>一个好友bc</li>
<li>一个好友bd</li>
</ul>
</td>

</tr>
</table>
</body>

</html>

下拉前的结果