首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例

Posted in Javascript onJune 14, 2013

-1、右侧弹出导航菜单完整代码 

<!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=utf8" /> 
<title>右侧弹出导航菜单－－柯乐义</title> 
<style type="text/css"> 
.my_left_category{ 
width:150px; 
font-size:12px; 
font-family:arial,sans-serif; 
letter-spacing:2px; 
} 
.my_left_category h1{ 
background-image:url(http://www.keleyi.com/keleyi/phtml/rightmenu/top.gif); 
height:20px; 
background-repeat:no-repeat; 
font-size:14px; 
font-weight:bold; 
padding-left:15px; 
padding-top:8px; 
margin:0px; 
color:#FFF; 
} 
.my_left_category .my_left_cat_list{ 
width:148px; 
border-color:#b60134; 
border-style:solid; 
border-width:0px 1px 1px 1px; 
line-height:13.5pt; 
} 
.my_left_category .my_left_cat_list h2 { 
margin:0px; 
padding:3px 5px 0px 9px; 
} 
.my_left_category .my_left_cat_list h2 a { 
color:#d6290b; 
font-weight:bold; 
font-size:14px; 
line-height:22px; 
} 
.my_left_category .my_left_cat_list h2 a:hover { 
color:#d6290b; 
font-weight:bold; 
font-size:14px; 
line-height:22px; 
} 
.my_left_category .h2_cat{ 
width:148px; 
height:26px; 
background-image:url(http://www.keleyi.com/keleyi/phtml/rightmenu/right.gif); 
background-repeat:no-repeat; 
line-height:26px; 
font-weight:normal; 
color:#333333; 
position:relative; 
} 
.my_left_category .h2_cat_1{ 
width:148px; 
height:26px; 
background-image:url(http://www.keleyi.com/keleyi/phtml/rightmenu/line.gif); 
background-repeat:no-repeat; 
line-height:26px; 
font-weight:normal; 
color:#333333; 
position:relative; 
} 
.my_left_category a{ 
font:12px; 
text-decoration:none; 
color:#333333; 
} 
.my_left_category a:hover{ 
text-decoration:underline; 
color:#ff3333; 
} 
.my_left_category h3{ 
margin:0px; 
padding:0px; 
height:26px; 
font-size:12px; 
font-weight:normal; 
display:block; 
padding-left:8px; 
} 
.my_left_category h3 span{color:#999999; width:145px; float:right;} 
.my_left_category h3 a{ line-height:26px;} 
.my_left_category .h3_cat{ 
display:none; 
width:204px; 
position:absolute; 
left:123px; 
margin-top:-26px; 
cursor:auto; 
} 
.my_left_category .shadow{ 
position:inherit; 
background:url(http://www.keleyi.com/keleyi/phtml/rightmenu/back.gif) left top; 
width:204px; 
} 
.my_left_category .shadow_border{ 
position:inherit; 
width:200px; 
border:1px solid #959595; margin-top:1px; 
border-left-width:0px; 
background:url(http://www.keleyi.com/keleyi/phtml/rightmenu/height.gif) no-repeat 0px 21px; 
background-color:#ffffff; 
margin-bottom:3px 
} 
.my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px} 
.my_left_category .shadow_border ul li { 
list-style:none; 
padding-left:10px; 
background-image:url(http://www.keleyi.com/keleyi/phtml/rightmenu/justright.gif); 
background-repeat:no-repeat; 
background-position:0px 8px; 
float:left; 
width:75px; 
height:26px; 
overflow:hidden; 
letter-spacing:0px; 
} 
.my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;} 
.my_left_category .active_cat h3 { font-weight:bold} 
.my_left_category .active_cat h3 span{ display:none;} 
.my_left_category .active_cat div{display:block;} 
</style> 
</head> 
<body> 
<div class="my_left_category"> 
<h1>分类导航</h1> 
<div class="my_left_cat_list"> 
<h2><a href="#">按网站类别</a></h2> 
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 
<h3><a href="#">企业建站</a></h3> 
<div class="h3_cat"> 
<div class="shadow"> 
<div class="shadow_border"> 
<ul> 
<li><a href="#">LOGO设计</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="http://www.keleyi.com">柯乐义</a></li> 
<li><a href="#">网站建设</a></li> 
<li><a href="#">SEO</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 
<h3><a href="#">韩国男装</a></h3> 
<div class="h3_cat"> 
<div class="shadow"> 
<div class="shadow_border"> 
<ul> 
<li><a href="#">LOGO设计</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> 
<li><a href="#">SEO</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 
<h3><a href="#">韩国童装</a></h3> 
<div class="h3_cat"> 
<div class="shadow"> 
<div class="shadow_border"> 
<ul> 
<li><a href="#">LOGO设计</a></li> 
<li><a href="#">网站设计</a></li> 
<li><a href="http://www.keleyi.com">网站广告</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="http://www.keleyi.com">SEO</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<!-- again --> 
<h2><a href="#">按品牌选货</a></h2> 
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 
<h3><a href="#" style="color:#ff3333;">热销推荐</a></h3> 
<div class="h3_cat"> 
<div class="shadow"> 
<div class="shadow_border"> 
<ul> 
<li><a href="#">柯乐义</a></li> 
<li><a href="#">网站设计</a></li> 
<li><a href="#">网站广告</a></li> 
<li><a href="http://www.keleyi.com">推广</a></li> 
<li><a href="#">建网站</a></li> 
<li><a href="#">网站推广</a></li> 
<li><a href="#">网站建设</a></li> 
<li><a href="#">SEO</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 
<h3><a href="http://www.keleyi.com">网站建设</a></h3> 
<div class="h3_cat"> 
<div class="shadow"> 
<div class="shadow_border"> 
<ul> 
<li><a href="#">LOGO设计</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> 
<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="#">SEO</a></li> 
<li><a href="#">网站制作</a></li> 
<li><a href="#">LOGO设计</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> 
<li><a href="#">SEO</a></li> 
<li><a href="#">网站建设</a></li> 
<li><a href="#">LOGO设计</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> 
<li><a href="#">SEOqqqqqqqqeeeeqqqqqqq</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 
<h3><a href="#">网站程序</a></h3> 
<div class="h3_cat"> 
<div class="shadow"> 
<div class="shadow_border"> 
<ul> 
<li><a href="#">PHP</a></li> 
<li><a href="#">ASP</a></li> 
<li><a href="#">JSP</a></li> 
<li><a href="#">ASP.Net</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<div class="h2_cat_1" onmouseover="this.className='h2_cat_1 active_cat'" onmouseout="this.className='h2_cat_1'"> 
<h3><a href="#">其他网站</a></h3> 
</div> 
<!-- again --> 
<h2><a href="#">按价格选货</a></h2> 
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 
<h3><a href="#">低端价位</a></h3> 
<div class="h3_cat"> 
<div class="shadow"> 
<div class="shadow_border"> 
<ul> 
<li><a href="#">50元以下</a></li> 
<li><a href="#">50-100元</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'"> 
<h3><a href="http://www.keleyi.com">中高端价位</a></h3> 
<div class="h3_cat"> 
<div class="shadow"> 
<div class="shadow_border"> 
<ul> 
<li><a href="#">100-150元</a></li> 
<li><a href="#">150-200元</a></li> 
<li><a href="#">200-300元</a></li> 
<li><a href="#">300元以上</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
<!-- again --> 
<h2><a href="#">超值特价区</a></h2> 
<h2><a href="#">现货区</a></h2> 
</div> 
</div> 
</body> 
</html>

0、下方弹出导航菜单代码 
<!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> 
<title>css+div+js下拉菜单导航--柯乐义</title> 
<style type="text/css"> 
*{margin:0;padding:0;list-style-type:none;} 
body{padding:0;margin:0;font-size:12px;color:#fff;font-family:arial, helvetica, sans-serif;background:#fff;} 
#nav{left:0px;right:0px;width:600px;position:fixed;margin-left:auto;margin-right:auto;top:175px;height:30px;} 
#nav li{float:left;text-align:center;} 
#nav li a{float:left;width:100px;color:#336601;text-decoration:none;padding:3px 5px 0 5px;} 
#nav li a:hover{float:left;width:88px;color:#fff;background:#539d26;text-decoration:none;padding:3px 3px 0 20px;} 
.list{font-weight:normal;line-height:20px;text-align:left;padding:4px;} 
.menu1{border:#9cdd75 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#336601;padding-top:6px;background:#f1fbec;moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7;} 
.menu2{border:#eee8dd 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#999;padding-top:6px;height:18px;background:#f5f5f5;} 
</style> 
</head> 
<body> 
<div style="position:fixed;top:0px;"><script type="text/javascript"><!-- 
google_ad_client = "ca-pub-7740261255677392"; 
google_ad_slot = "8839078091"; 
google_ad_width = 728; 
google_ad_height = 90; 
//--> 
</script> 
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<div id="nav"> 
<ul> 
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">Javascript 
<div class="list"> 
<a href="http://www.keleyi.com/a/bjac/687f154f53ab3aef.htm" target="_blank">js中substring</a><br /> 
<a href="http://www.keleyi.com/a/bjac/ff33a0656183eba.htm" target="_blank">客户端代码着色</a><br /> 
<a href="http://www.keleyi.com/a/bjac/6e893bbacf5184f3.htm" target="_blank">js实现代码着色</a><br /> 
<a href="http://www.keleyi.com/a/bjac/21e2e5321077656f.htm" target="_blank">11个js技巧</a><br /> 
<a href="http://www.keleyi.com/a/bjac/d32ac9822ef75ef9.htm" target="_blank">tab切换样式</a><br /> 
<a href="http://www.keleyi.com/a/bjac/fca5ac722271d2d5.htm" target="_blank">js获取可见域宽</a><br /> 
<a href="http://www.keleyi.com/a/bjac/ade2f3941bd75ba.htm" target="_blank">js导航菜单</a> 
</div> 
</li> 
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">jQuery 
<div class="list"> 
<a href="http://www.keleyi.com/a/bjac/13639353acde40c.htm" target="_blank">左侧可弹出div</a><br /> 
<a href="http://www.keleyi.com/a/bjac/d863921ed93d03ff.htm" target="_blank">jquery修改a标签</a><br /> 
<a href="http://www.keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">纯文本返回顶部</a><br /> 
<a href="http://www.keleyi.com/a/bjac/ac398357acb82782.htm" target="_blank">jquery倒计时</a><br /> 
<a href="http://www.keleyi.com/a/bjac/88af29335890a287.htm" target="_blank">div(tab)切换</a><br /> 
<a href="http://www.keleyi.com/a/bjac/2041333085cb032d.htm" target="_blank">选项卡切换</a><br /> 
<a href="http://www.keleyi.com/a/bjac/768f469b95b61487.htm" target="_blank">单行文字滚动</a><br /> 
<a href="http://www.keleyi.com/a/bjac/ed5eb8c2959c619e.htm" title="滚动页面时DIV到达顶部时固定在顶部" target="_blank">DIV到顶固定</a><br /> 
<a href="http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm" title="使用jQuery UI修饰title属性的气泡悬浮框" target="_blank">修饰title气泡</a> 
</div> 
</li> 
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">C# 
<div class="list"> 
<a href="http://www.keleyi.com/a/bjac/e3ce4526c3fcaf8f.htm" target="_blank">删除文本空白行</a><br /> 
<a href="http://www.keleyi.com/a/bjac/94190f87387a868a.htm" target="_blank">生成图片验证码</a><br /> 
<a href="http://www.keleyi.com/a/bjac/954abc0d69092dc1.htm" title=".NET生成固定长度的唯一字符串（以8位为例）" target="_blank">生成唯一字符串</a><br /> 
<a href="http://www.keleyi.com/a/bjac/c4dd6879a4a4fb36.htm" target="_blank">向文件写入文本</a><br /> 
<a href="http://www.keleyi.com/a/bjac/d09a76fa32100d7.htm" target="_blank">用IgnoreRoute忽略路径</a><br /> 
<a href="http://www.keleyi.com/a/bjac/84d4e8554b88f61.htm" target="_blank">RouteCollection类</a><br /> 
<a href="http://www.keleyi.com/a/bjac/c8e988b2eb520f4b.htm" target="_blank">柯乐义图片压缩类</a> 
</div> 
</li> 
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">CMS 
<div class="list"><a href="http://www.keleyi.com/a/bjac/9d5534156d5814fc.htm" target="_blank">KeleyiCMS更新</a><br /> 
<a href="http://www.keleyi.com/a/bjac/2916901353b081f1.htm" target="_blank">柯乐义留言板介绍</a> 
</div> 
</li> 
</ul> 
</div> 
</body> 
</html>

1、 
<!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> 
*{ 
padding:0; 
margin:0; 
} 
#tab 
{ 
width:400px; 
position:relative; 
margin:0 auto; 
margin-top:100px; 
} 
#tab div 
{ 
display:none;/*让选项卡内容在没有激活的时候不显示*/ 
position:absolute; 
top:24px;/*选项卡标题的高度是24px*/ 
left:0; 
width:398px; 
border:solid #d4d3d3; 
border-width:0 1px 1px; 
} 
#tab .blank 
{ 
display:block; 
padding-bottom:10px;/*让激活的选项卡内容区域最低端的文字不贴着元素底部*/ 
} 
#tab h3 
{ 
width:98px; 
float:left; 
height:24px; 
border:1px solid #cccccc; 
text-align:center; 
font-size:14px; 
font-weight:normal; 
line-height:24px; 
background:url(images/51.jpg) no-repeat; 
cursor:pointer;/*让鼠标移动到选项卡标题上的时候变成手的形状*/ 
} 
#tab .up 
{ 
background:url(images/61.jpg) no-repeat; 
} 
#tab ul 
{ 
margin:15px 0 0;/*让列表项文字离选项卡标题的下端远一点*/ 
padding:0; 
} 
#tab ul,#tab li 
{ 
list-style:none; 
} 
#tab li 
{ 
width:47.9%;/*这里用百分比的作用可以解决IE6中的宽度解析问题*/ 
height:22px; 
line-height:22px;/*这两行的作用是设置li的高度，并将li中的文字内容上下居中显示*/ 
float:left; 
margin:0 1%; 
border-bottom:1px dashed #cccccc; 
text-indent:10px; 
display:inline;/*修改IE6中的双倍间距的bug问题*/ 
white-space:nowrap; 
text-overflow:ellipsis; 
overflow: hidden;/*这三行的作用是，如果li中的文字内容超过li的大小，则超出的部分用省略号显示*/ } 
#tab li a 
{ 
font-size:12px; 
text-decoration:none; 
color:#333333; 
text-indent:10px; 
} 
#tab li a:hover 
{ 
text-decoration:underline; 
color:red; 
} 
#tab a:hover h3 
{ 
border:1px solid #cccccc; 
border-bottom:0px; 
} 
</style> 
</head><body> 
<div id="tab"> 
<!--选项卡标题开始--> 
<h3 class="up" onmouseover="go_to(1);">选项一</h3> 
<!--选项卡标题结束--> 
<!--选项卡内容开始--> 
<div class="blank"> 
<ul> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li> 
</ul> 
</div> 
<!--选项卡内容结束--> 
<!--选项卡标题开始--> 
<h3 onmouseover="go_to(2);">选项二</h3> 
<!--选项卡标题结束--> 
<!--选项卡内容开始--> 
<div> 
<ul> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li> 
</ul> 
</div> 
<!--选项卡内容结束--> 
<!--选项卡标题开始--> 
<h3 onmouseover="go_to(3);">选项三</h3> 
<!--选项卡标题结束--> 
<!--选项卡内容开始--> 
<div> 
<ul> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li> 
</ul> 
</div> 
<!--选项卡内容结束--> 
<!--选项卡标题开始--> 
<h3 onmouseover="go_to(4);">选项四</h3> 
<!--选项卡标题结束--> 
<!--选项卡内容开始--> 
<div> 
<ul> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li> 
</ul> 
</div> 
<!--选项卡内容结束--> 
</div> 
<script type="text/javascript"> 
<!-- 
var h=document.getElementById("tab").getElementsByTagName("h3"); 
var d=document.getElementById("tab").getElementsByTagName("div"); 
function go_to(ao) 
{ 
for(var i=0;i<h.length;i++) 
{ 
if(ao-1==i) 
{ 
h[i].className="up"; 
d[i].className="blank"; 
} 
else 
{ 
h[i].className=" "; 
d[i].className=" "; 
} 
} 
} 
//--> 
</script> 
</body> 
</html>

2、选项卡用 <ul id="myItem"><li>第一个</li><li>第二个</li></ul> 
<script language="javascript" type="text/javascript"> 
window.onload = function(){ 
var li = document.getElementById("myItem").getElementsByTagName("li"); 
for(var i=0;i<li.length;i++){ 
(function(){ 
li[a].onmouseover = function(){ 
this.style.display="block"; 
} 
li[a].onmouseout = function(){ 
this.style.display ="none"; 
} 
})(i); 
} 
} 
</script>

3、 
<script type="text/javascript"> 
function displaySubMenu(ITstudy_cn) { 
var subMenu = document.getElementById(ITstudy_cn); 
subMenu.style.display = "block"; 
} 
function hideSubMenu(ITstudy_cn) { 
var subMenu = document.getElementById(ITstudy_cn); 
subMenu.style.display = "none"; 
} 
</script> 
<style> 
* { padding:0; margin:0;} 
body { text-align: center; font-family: "宋体",arial;border: 0; background: #FFF; font-size:12px; color:#000;} 
/* 页头下拉菜单 */ 
#navigation { 
margin:2px; 
} 
#navigation, #navigation li ul { 
list-style-type:none; 
} 
#navigation li { 
float:left; text-align:center; position:relative; 
} 
#navigation li a:link, #navigation li a:visited { 
display:block; text-decoration:none; 
} 
#navigation li a:hover { 
color:#fff; background:#2687eb; 
} 
#navigation li ul li a:hover { 
color:#990000; background:#d6ecfd; text-decoration:underline; 
} 
#navigation li ul { 
display:none; position:absolute; width:90px; 
top:13px; left:-45px; padding:5px; border:1px solid #d6ecfd;background-color:#f2f9fe; 
} 
</style> 
<ul id="navigation"> 
<li ><a href=" http://www.itstudy.cn">首页</a></li> 
<li>  |   </li> 
<li onMouseOver="displaySubMenu('fg')" onMouseOut="hideSubMenu('fg')" > 
<a href="javascript:void(0);" >风格</a> 
<ul id="fg"> 
<li><a href="javascript:" >恢复默认设置</a></li> 
<li><a href="javascript:" >深度空间风格</a></li> 
<li><a href="javascript:" >IT学习网风格</a></li> 
</ul> 
</li> 
<li>     </li> 
</ul>

jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
JavaScript.The.Good.Parts阅读笔记（二）作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 #Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 #Javascript
JavaScript实现表格排序方法
Jun 14 #Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 #Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 #Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 #Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 #Javascript
maven(2) commit(1) 自定义函数(1) procedure(1) V Rising(1) Tablespace(1) Navicat(1) harbor(1) 内置函数(1) GoFrame(3)
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
初学Python实用技巧两则
2014/08/29 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
python wsgiref源码解析
2021/02/06 Python
EVE LOM英国官网：全世界最好的洁面膏
2017/10/30 全球购物
Urban Outfitters德国官网：美国跨国生活方式零售公司
2018/05/21 全球购物
在购买印度民族服饰：Soch
2020/09/15 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
工会换届选举方案
2014/05/21 职场文书
班级口号大全
2014/06/09 职场文书
个人委托书如何写
2014/09/25 职场文书
小学生优秀评语
2014/12/29 职场文书
运动会班级前导词
2015/07/20 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server
小程序实现侧滑删除功能
2022/06/25 Javascript
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript