CSS+div下拉菜单(js)_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
CSS+div下拉菜单(js)
上传于|0|0|文档简介
&&下拉菜单的一种实现方式
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩6页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢CSS+DIV+JS鼠标移动不同的导航 显示不同内容 - 前行小菜鸟 - ITeye技术网站
博客分类：
CSS+DIV+JS导航显示
平常大部分时间都在写后台代码。很少做前台界面的设计。这次，由于公司需要。做了一些界面设计方面的东西。
主要是用CSS+DIV+JS实现的一个导航。就是鼠标移动到不同的导航菜单上，显示不同的内容。
代码如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &&html xmlns=""&&head&&meta http-equiv="Content-Type" content="text/charset=gb2312" /&&title&简洁Tab&/title&&style type="text/css"&&!--body,div,ul,li{ padding:0; text-align:}body{ font:12px "宋体"; text-align: margin-top: 12 margin-bottom: 12}a:link{color:#00F;text-decoration:}a:visited {color: #00F;text-decoration:}a:hover {color: #c00;text-decoration:}ul{ list-style:}/*选项卡1*/#Tab1{width:460margin:0padding:0margin:0}/*选项卡2*/#Tab2{width:576margin:0padding:0margin:0}/*菜单class*/.Menubox {width:100%;background:url();height:28line-height:28}.Menubox ul{margin:0padding:0}.Menubox li{float:display:cursor:width:114text-align:color:#949694;font-weight:}.Menubox li.hover{padding:0background:#width:116border-left:1px solid #A8C29F;border-top:1px solid #A8C29F;border-right:1px solid #A8C29F;background:url();color:#739242;font-weight:height:27line-height:27}.Contentbox{clear:margin-top:0border:1px solid #A8C29F;border-top:height:181text-align:padding-top:8}.STYLE2 {font-size: 18px}--&&/style&&script&&!--/*第一种形式 第二种形式 更换显示样式*/function setTab(name,cursel,n){for(i=1;i&=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none";}}//--&&/script&&/head&&body&&br&&br&&div id="Tab1"&&div class="Menubox"&&ul& &li id="one1" onmouseover="setTab('one',1,4)" class="hover"& &img id="hide1" src="image/zhandian1.png" /& &/li&
&li id="one2" onmouseover="setTab('one',2,4)" &&img id="hide2" src="image/xianlu.png" /&&/li&
&li id="one3" onmouseover="setTab('one',3,4)"&&img src="image/huanc.png" name="hide3" id="hide3" /&&/li&
&li id="one4" onmouseover="setTab('one',4,4)"& &img id = "hide4" src="image/gps.png" /&&/li&
&/ul&&/div&
&div class="Contentbox"&
&div id="con_one_1" class="hover"&
&h3&站点查询&/h3&&br /&
&span class="STYLE2"&站点名称&/span&
&input type="text" name="text1" size="18" maxlength="20"&
&img src="image/search.png" name="hide4" vspace="10" id = "hide4" /&
&img src="image/重置.png" name="hide4" hspace="20" vspace="10" id = "hide4" /&
&/form& &/div&
&div id="con_one_2" style="display:none"& &form&
&h3& 线路查询 &/h3&&/br&
&span class="STYLE2"&线路名&/span&
&input type="text" name="text1" size="18" maxlength="20"&&/br&
&img id = "hide4" src="image/search.png" vspace="10"/&
&img id = "hide4" src="image/重置.png"
hspace="20"
vspace="10"/&
&/form& &/div& &div id="con_one_3" style="display:none"& &form& &h3&换乘查询&/h3&&/br& &span class="STYLE2"&起点&/span&&input type="text" name="text1" size="12" maxlength="20"&&/br& &span class="STYLE2"&终点&/span&&input type="text" name="text1" size="12" maxlength="20"&&/br& &span class="STYLE2"&乘车偏好：&/span&&select name="bus"&
&option value="1"&较快捷&/option&
&option value="2"&不换乘&/option&
&option value="3"&不步行&/option&
&option value="4"&多步行&/option&
&/select&&/br&
&img id = "hide4" src="image/search.png" vspace="10" /& &img id = "hide4" src="image/重置.png" hspace="20" vspace="10"/&
&/form& &/div& &div id="con_one_4" style="display:none"&
&h3&GPS候车查询&/h3&&/br&
&span class="STYLE2"&站点名称&/span&
&input type="text" name="text1" size="12" maxlength="20"&&/br&
&span class="STYLE2"&线路号&/span&&select name="lineCode" &
&option value="1"&B12&/option&
&option value="2"&45&/option&
&option value="3"&72&/option&
&option value="4"&68&/option&
&/select&&/br&
&span class="STYLE2"&开往方向&/span&
&select name="goWhere" &
&option value="1"&火车站&/option&
&option value="2"&科学大道与石楠路&/option&
&option value="3"&大谢村&/option&
&option value="4"&化工路&/option&
&/select&&/br&
&img id = "hide4" src="image/search.png" vspace="10"/&
&img id = "hide4" src="image/重置.png" hspace="20"
vspace="10"/&
&/div& &/div&&/div&&br&&/body&&/html&
显示界面：
相关知识库：
浏览: 39153 次
来自: 河南
我编写了一个简短的程序，但是通过刷新可用端口：Enumerat ...
不错，比较实用！&>&&>&&>&&>&DIV+CSS封装的一个下拉框效果
DIV+CSS封装的一个下拉框效果
上传大小：35KB
用DIV+CSS封装的一个下拉框控件，效果不错
综合评分：0（0位用户评分）
所需积分：2
下载次数：9
审核通过送C币
创建者：caozhy
创建者：nigelyq
创建者：stephen1315
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
DIV+CSS封装的一个下拉框效果
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
legends2012
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：}