js鼠标触发显示隐藏对应层
2012-06-21 16:39
260 查看
<!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=gb2312" />
<title>js鼠标触发显示隐藏对应层</title>
<style type="text/css">
<!--
* {
padding:0px;
margin:0px;
font:12px 宋体;
}
.main {
width:300px;
border:#FF99CC solid 1px;
}
.list_nav {
width:300px;
height:30px;
background:#FFCCFF;
list-style-type:none;
}
.list_nav li {
width:80px;
height:30px;
line-height:30px;
text-align:center;
border-right:#FF99CC solid 1px;
float:left;
}
.li_current {
background:#FFFFFF;
}
.content {
clear:both;
width:290px;
padding:5px;
}
.content ul {
width:290px;
}
.content ul li {
line-height:20px;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
//切换
function setTab(name,num,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById(name+"_"+"con"+i);
menu.className=i==num?"li_current":"";
con.style.display=i==num?"block":"none";
}
}
</script>
<div class="main">
<ul class="list_nav">
<li id="one1" class="li_current">易换网</li>
<li id="one2" onclick="setTab('one',2,2)">老酒街</li>
</ul>
<div id="one_con1" class="content">
<ul>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
</ul>
</div>
<div id="one_con2" class="content">
<ul>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
</ul>
</div>
</div>
<script type="text/javascript">
//切换
setTab('one',2,2)
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js鼠标触发显示隐藏对应层</title>
<style type="text/css">
<!--
* {
padding:0px;
margin:0px;
font:12px 宋体;
}
.main {
width:300px;
border:#FF99CC solid 1px;
}
.list_nav {
width:300px;
height:30px;
background:#FFCCFF;
list-style-type:none;
}
.list_nav li {
width:80px;
height:30px;
line-height:30px;
text-align:center;
border-right:#FF99CC solid 1px;
float:left;
}
.li_current {
background:#FFFFFF;
}
.content {
clear:both;
width:290px;
padding:5px;
}
.content ul {
width:290px;
}
.content ul li {
line-height:20px;
}
-->
</style>
</head>
<body>
<script type="text/javascript">
//切换
function setTab(name,num,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById(name+"_"+"con"+i);
menu.className=i==num?"li_current":"";
con.style.display=i==num?"block":"none";
}
}
</script>
<div class="main">
<ul class="list_nav">
<li id="one1" class="li_current">易换网</li>
<li id="one2" onclick="setTab('one',2,2)">老酒街</li>
</ul>
<div id="one_con1" class="content">
<ul>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
<li>易换网易换网易换网ehuanw.com</li>
</ul>
</div>
<div id="one_con2" class="content">
<ul>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
<li>老酒街老酒街老酒街laojiujie.com</li>
</ul>
</div>
</div>
<script type="text/javascript">
//切换
setTab('one',2,2)
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js鼠标滑动图片显示隐藏效果
- headroom.js 用例，漂亮完善的 鼠标滚动 --->导航栏隐藏显示效果
- JS------鼠标hover动作，显示与隐藏的切换
- zf-关于荆州首页鼠标移动到导航栏上去触发的js 显示 问题解决办法
- jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
- js应用之事件触发：隐藏和显示按钮
- js--鼠标移入移出小图片，显示隐藏大图片
- js实现删除select下拉框对应option（旧版本，现版本可以直接jQuery显示或隐藏，兼容IE）
- css效果，在一个盒子里，把一部分内容隐藏掉，在鼠标悬停到div时，就会把隐藏的部分向上显示出来。 不用js操作，纯css就可以。
- js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用
- 如何用JS实现一个DropDownList的值改变时触发另一个DropDownList的显示与隐藏
- js动态创建div层，鼠标悬停显示隐藏div（无闪烁+小三角）
- js 鼠标经过显示隐藏效果实例
- JS之鼠标移上显示，鼠标移开隐藏
- jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
- Win8任务栏自动隐藏后无法显示当鼠标移动到对应的方向不显示
- js 鼠标点击一个按钮显示div的浮动框,点击页面其他任何地方后,隐藏浮动框
- 鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
- js小记---根据后台数据的多少控制滚动条显示或隐藏（scroll or hidden）
- 鼠标隐藏和显示改变光标