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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
JavaScript Array对象详解
Mar 01 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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数据库操作面向对象的优点
2006/10/09 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python实现简单神经网络算法
2018/03/10 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python——全排列数的生成方式
2020/02/26 Python
Python接口测试文件上传实例解析
2020/05/22 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
上学迟到的检讨书
2014/01/11 职场文书
中秋晚会致辞
2015/07/31 职场文书
党校培训学习心得体会
2016/01/06 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
一行Python命令实现批量加水印
2022/04/07 Python