DHTML技术综合演示---示例:下拉风格的菜单条2--用表格封装的
来源：互联网 发布：网络营销商劫持网络 编辑：程序博客网 时间：2024/05/17 23:18
<!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)" onclick="list(this)">好友菜单1</a>
<!--开发时样式设置的测试:
<ul class="close">
-->
<ul>
<li>一个好友a</li>
<li>一个好友b</li>
<li>一个好友c</li>
<li>一个好友d</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="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)" onclick="list(this)">好友菜单3</a>
<ul>
<li>一个好友ba</li>
<li>一个好友bb</li>
<li>一个好友bc</li>
<li>一个好友bd</li>
</ul>
</td>
</tr>
</table>
</body>
<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)" onclick="list(this)">好友菜单1</a>
<!--开发时样式设置的测试:
<ul class="close">
-->
<ul>
<li>一个好友a</li>
<li>一个好友b</li>
<li>一个好友c</li>
<li>一个好友d</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="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)" onclick="list(this)">好友菜单3</a>
<ul>
<li>一个好友ba</li>
<li>一个好友bb</li>
<li>一个好友bc</li>
<li>一个好友bd</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
下拉前的结果
下拉后的结果
0 0
- DHTML技术综合演示---示例:下拉风格的菜单条2--用表格封装的
- DHTML技术综合演示---示例:下拉风格的菜单条
- DHTML技术综合演示---示例:表格排序
- DHTML技术综合演示---示例:表格创建2
- DHTML技术综合演示---示例:表格删除行、列
- DHTML技术综合演示---示例:表格行间隔显示
- DHTML技术演示---下拉菜单技术演示2---二级联动和添加附件(文件)技术演示
- JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
- DHTML技术演示---动态创建表格、删除表格（详细的解释，适合初学者）
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
- DHTML技术演示---selcet的使用(级联技术)
- Tapstry3的追忆------综合示例演示
- DHTML技术演示---类似调查问卷的单选框学习
- WF综合技术演示的例子
- JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强
- 用DHTML做的一个菜单特效
- 带滚动条的下拉表格
- 导航条上的下拉菜单
- response.getWriter().write()与out.print()的区别
- 每日一题 No.47 区间内素数的个数
- 深入理解JavaScript系列（5）：强大的原型和原型链
- 微服务架构的描述
- 李宏毅机器学习课程笔记7：Transfer Learning、SVM、Structured Learning
- DHTML技术综合演示---示例:下拉风格的菜单条2--用表格封装的
- 内存泄漏
- javascript中parseInt的正确使用方式
- 十分钟搞定pandas
- Windows 文件操作
- 401. Binary Watch
- Hibernate状态 (merge,attachDirty,attachClean)
- 层次式电路设计与平坦式电路设计
- Cocos-Js项目中自己写的 HashMap
