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 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
javascript实现拼图游戏
Jan 29 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实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
javascript 一些用法小结
2009/09/11 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
通过C++学习Python
2015/01/20 Python
详解Python中的文件操作
2016/08/28 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python守护线程用法实例
2017/06/23 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
美的官方商城:Midea
2016/09/14 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
学校搬迁方案
2014/06/15 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
水知道答案观后感
2015/06/08 职场文书