首页
所有分类
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 相关文章推荐
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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
生成缩略图(1) shell(3) reload(1) http(6) https(7) 反向代理(2) Telnet(1) 防盗链(1) 负载均衡(6) 动静分离(1)
You might like
为查询结果建立向后/向前按钮
2006/10/09 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP 以POST方式提交XML、获取XML，解析XML详解及实例
2016/10/26 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
Laravel访问出错提示：`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
JS的数组迭代方法
2015/02/05 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
2018/01/07 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
python实现基本进制转换的方法
2015/07/11 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python 线程池用法简单示例
2019/10/02 Python
python创建学生管理系统
2019/11/22 Python
体育教师自我鉴定
2014/02/12 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
用人单位聘用意向书
2015/05/11 职场文书