Dom编程（有子菜单的导航条 和 选项卡）
来源：互联网 发布：用mac怎么该音频格式 编辑：程序博客网 时间：2024/04/29 20:32
选项卡：
<!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>tab</title><style type="text/css">*{margin:0;padding:0;}#tab{width:312px;margin:100px auto;}#tab ul{list-style:none;}#tabControl{border-top:solid 2px #206f96;width:310px;display:table;}#tabControl span{display:table-cell;text-align:center;font:14px/30px "宋体";height:29px;line-height:29px;}.info{color:#666;font-size:14px;line-height:30px;}#s1{border-left:1px solid #CFCFCF;border-right:1px solid #CFCFCF;}#s2{background-image:url(1.jpg);background-repeat:repeat-x;border-right:1px solid #CFCFCF;border-bottom:1px solid #CFCFCF;}#s3{background-image:url(1.jpg);background-repeat:repeat-x;border-right:1px solid #CFCFCF;border-bottom:1px solid #CFCFCF;}#info2{display:none;}#info3{display:none;}</style><script type="text/javascript">function listXinWen(){document.getElementById("s1").style.background = "none";document.getElementById("s1").style.borderBottom = "none";document.getElementById("s2").style.background = "url(1.jpg) repeat-x";document.getElementById("s2").style.borderBottom = "1px solid #CFCFCF";document.getElementById("s3").style.background = "url(1.jpg) repeat-x";document.getElementById("s3").style.borderBottom = "1px solid #CFCFCF";document.getElementById("info1").style.display = "block";document.getElementById("info2").style.display = "none";document.getElementById("info3").style.display = "none";}function listTuPian(){document.getElementById("s2").style.background = "none";document.getElementById("s2").style.borderBottom = "none";document.getElementById("s1").style.background = "url(1.jpg) repeat-x";document.getElementById("s1").style.borderBottom = "1px solid #CFCFCF";document.getElementById("s3").style.background = "url(1.jpg) repeat-x";document.getElementById("s3").style.borderBottom = "1px solid #CFCFCF";document.getElementById("info2").style.display = "block";document.getElementById("info1").style.display = "none";document.getElementById("info3").style.display = "none";}function listJunShi(){document.getElementById("s3").style.background = "none";document.getElementById("s3").style.borderBottom = "none";document.getElementById("s2").style.background = "url(1.jpg) repeat-x";document.getElementById("s2").style.borderBottom = "1px solid #CFCFCF";document.getElementById("s1").style.background = "url(1.jpg) repeat-x";document.getElementById("s1").style.borderBottom = "1px solid #CFCFCF";document.getElementById("info3").style.display = "block";document.getElementById("info2").style.display = "none";document.getElementById("info1").style.display = "none";}</script></head><body><div id="tab"><div id="tabControl"><span id="s1" onmouseover="listXinWen()">新闻</span><span id="s2" onmouseover="listTuPian()">图片</span><span id="s3" onmouseover="listJunShi()">军事</span></div><div id="info1" class="info"><ul><li>新闻新闻新闻新闻新闻新闻新闻新闻</li><li>新闻新闻新闻新闻新闻新闻新闻新闻</li><li>新闻新闻新闻新闻新闻新闻新闻新闻</li><li>新闻新闻新闻新闻新闻新闻新闻新闻</li><li>新闻新闻新闻新闻新闻新闻新闻新闻</li><li>新闻新闻新闻新闻新闻新闻新闻新闻</li><li>新闻新闻新闻新闻新闻新闻新闻新闻</li><li>新闻新闻新闻新闻新闻新闻新闻新闻</li><li>新闻新闻新闻新闻新闻新闻新闻新闻</li></ul></div><div id="info2" class="info"><ul><li>图片图片图片图片图片图片图片图片</li><li>图片图片图片图片图片图片图片图片</li><li>图片图片图片图片图片图片图片图片</li><li>图片图片图片图片图片图片图片图片</li><li>图片图片图片图片图片图片图片图片</li><li>图片图片图片图片图片图片图片图片</li><li>图片图片图片图片图片图片图片图片</li><li>图片图片图片图片图片图片图片图片</li><li>图片图片图片图片图片图片图片图片</li></ul></div><div id="info3" class="info"><ul><li>军事军事军事军事军事军事军事军事</li><li>军事军事军事军事军事军事军事军事</li><li>军事军事军事军事军事军事军事军事</li><li>军事军事军事军事军事军事军事军事</li><li>军事军事军事军事军事军事军事军事</li><li>军事军事军事军事军事军事军事军事</li><li>军事军事军事军事军事军事军事军事</li><li>军事军事军事军事军事军事军事军事</li><li>军事军事军事军事军事军事军事军事</li></ul></div></div></body></html>效果：
有子菜单的导航：
<!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>navbar</title><script type="text/javascript">function xianshi1(){document.getElementById("cd1").style.display = "block";}function yincang1(){document.getElementById("cd1").style.display = "none";}function xianshi2(){document.getElementById("cd2").style.display = "block";}function yincang2(){document.getElementById("cd2").style.display = "none";}</script><style type="text/css">*{margin:0;padding:0;}#caidan{width:800px;margin:50px auto 5px;background-color:#CCC;height:35px;}#caidan ul{list-style:none;}#caidan ul li.mu{width:100px;margin-right:10px;background-color:#FC0;float:left;height:35px;text-align:center;line-height:35px;position:relative;}#cd1{width:150px;position:absolute;padding-top:5px;display:none;}#cd1 ul{list-style:none;}.zi{background-color:#3C0;}#cd2{width:120px;position:absolute;padding-top:5px;display:none;}#cd2 ul{list-style:none;}#content{width:800px;background:#FFC;margin:0 auto;}</style></head><body><div id="caidan"><ul> <li class="mu" onmouseover="xianshi1()" onmouseout="yincang1()"> <a href="#">菜单项目</a> <div id="cd1"> <div class="zi"> <ul> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> </ul> </div> </div> </li> <li class="mu" onmouseover="xianshi2()" onmouseout="yincang2()"> <a href="#">菜单项目</a> <div id="cd2"> <div class="zi"> <ul> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> <li><a href="#">子菜单项目</a></li> </ul> </div> </div> </li> <li class="mu"><a href="#">菜单项目</a></li> <li class="mu"><a href="#">菜单项目</a></li> <li class="mu"><a href="#">菜单项目</a></li></ul></div><div id="content">爱我中华爱我中华爱我中华爱我中华爱我中华爱我中华</div></body></html>效果：
0 0
- Dom编程（有子菜单的导航条 和 选项卡）
- javascript DOM 带下拉子菜单的导航菜单
- 对选项菜单的应用，有包含子菜单，和对话框的弹出
- 导航条菜单的制作（笔记）
- 导航条菜单的制作（一）
- Android 选项菜单和子菜单的使用
- Android移动开发-选项菜单和子菜单（SubMenu）的实现
- 选项菜单和子菜单(SubMenu)
- 导航条菜单的制作
- 导航条菜单的制作
- 用javascript实现菜单子选项的隐藏和显示
- 基于bootstrap的网页开发（导航条和下拉菜单）
- Android子菜单和选项菜单与上下文菜单的实现
- Android子菜单和选项菜单与上下文菜单的实现
- 导航菜单（移动出现子菜单）
- bootstrap 1-导航条和下拉菜单
- 自定义下拉菜单（选项有图片和注释）
- jQuery导航条的效果（左侧菜单）
- 利用@media screen实现网页布局的自适应
- 数据库存储过程与函数的区别
- 通用sqlserver分页存储过程
- realloc 使用和思考
- Android Zxing 添加闪光灯功能
- Dom编程（有子菜单的导航条 和 选项卡）
- 记录个博客
- boa源码分析
- 调试_ _FILE__,__LINE__
- KMP实现
- Android之使用Android-query框架进行开发
- JS中showModalDialog 详细使用
- LeetCode-Largest Rectangle in Histogram
- HDU4915:Parenthese sequence（贪心）
