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 选择器、过滤器介绍
Feb 14 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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中几种常见的超时处理全面总结
2012/09/11 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
Angular路由简单学习
2016/12/26 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
手写一个python迭代器过程详解
2019/08/27 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
高中物理教学反思
2014/02/08 职场文书
中学校庆方案
2014/03/17 职场文书
劲霸男装广告词
2014/03/21 职场文书
珠宝店促销方案
2014/03/21 职场文书
小学师德师风整改措施
2014/10/27 职场文书
委托培训协议书
2014/11/17 职场文书
2014年团工作总结
2014/11/27 职场文书
培根随笔读书笔记
2015/07/01 职场文书
员工给公司的建议书
2019/06/24 职场文书
导游词之清晏园
2019/11/22 职场文书
PHP解决高并发问题
2021/04/01 PHP
golang 实现两个结构体复制字段
2021/04/28 Golang
纯html+css实现Element loading效果
2021/08/02 HTML / CSS