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 相关文章推荐
arguments对象
Nov 20 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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解析mht文件转换成html的实例
2017/03/13 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
航空大学应届生求职信
2013/11/10 职场文书
经济管理专业毕业生推荐信
2013/11/11 职场文书
二年级体育教学反思
2014/01/15 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
竞赛口号大全
2014/06/16 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
《绝招》教学反思
2016/02/20 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
Go语言基础map用法及示例详解
2021/11/17 Golang
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技