JS+DIV实现鼠标划过切换层效果的实例代码


Posted in Javascript onNovember 26, 2013

<style>
/*栏目切换样式开始*/
.none {display: none;}
.block {display: block;}
/*头部样式*/
.s_c {width:800px;text-align: center;}
.s_c ul{clear:both;margin:0;}
.s_c li{list-style:none;float:left;position: relative;width: 70px;}
/**/
.c_0 {background-color: #CCCCCC;} /*隐藏状态*/
.c_1 {background-color: #0000CC;} /*显示状态*/
/**/
.s_b{
border:1px solid #666;
height: 160px;
width: 440px;
}

/**/
/*栏目切换样式结束*/

</style>
<script language="javascript">
function aa(s_id){
for(i=1;i<7;i++){
   if(i==s_id){
    document.getElementById("s"+i).className="block"; //内容的样式
    document.getElementById("m"+i).className="c_"+i+" c_1"; //头部的样式
    //document.getElementById("uid_"+i).focus();
   }
   else
   {
    document.getElementById("s"+i).className="none"; //内容不显示
    document.getElementById("m"+i).className="c_0"; //
   }
}
}
</script>

<div >
<ul>
<li><div id="m1" ><a href="#" onmouseover="aa(1)">分类一</a></div></li>
<li><div id="m2" ><a href="#" onmouseover="aa(2)">分类二</a></div></li>
<li><div id="m3" ><a href="#" onmouseover="aa(3)">分类三</a></div></li>
<li><div id="m4" ><a href="#" onmouseover="aa(4)">分类四</a></div></li>
<li><div id="m5" ><a href="#" onmouseover="aa(5)">分类五</a></div></li>
<li><div id="m6" ><a href="#" onmouseover="aa(6)">分类六</a></div></li>
</ul>
</div>

<div >

<div id="s1">
<div>第一部分</div>
</div>
<div id="s2">
<div >第二部分</div>
</div>
<div id="s3">
<div >第三部分</div>
</div>
<div id="s4">
<div >第四部分</div>
</div>
<div id="s5">
<div >第五部分</div>
</div>
<div id="s6">
<div >第六部分</div>
</div>

</div>

Javascript 相关文章推荐
JScript的条件编译
May 29 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
键盘KeyCode值列表汇总
Nov 26 #Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 #Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 #Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 #Javascript
ie与ff下的event事件使用介绍
Nov 25 #Javascript
javascript利用apply和arguments复用方法
Nov 25 #Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 #Javascript
You might like
php实现上传图片生成缩略图示例
2014/04/13 PHP
Yii rules常用规则示例
2016/03/15 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
js导航菜单(自写)简单大方
2013/03/28 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
python选择排序算法的实现代码
2013/11/21 Python
python监控进程脚本
2018/04/12 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Python自定义一个异常类的方法
2019/06/27 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
应届毕业生求职信
2013/11/30 职场文书
中国好声音广告词
2014/03/18 职场文书
青春寄语大全
2014/04/09 职场文书
小学语文课后反思精选
2014/04/25 职场文书
中等生评语大全
2014/05/04 职场文书
2014年药店工作总结
2014/11/20 职场文书
布达拉宫导游词
2015/02/02 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
2019新员工心得体会
2019/06/25 职场文书
python中取整数的几种方法
2021/11/07 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers