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获取选中的文本的方法代码
Oct 30 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
农民C键的运用技巧
2020/03/04 星际争霸
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php实现文件预览功能
2017/05/23 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
express express-session的使用小结
2018/12/12 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
详谈python http长连接客户端
2017/06/12 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Pytorch to(device)用法
2020/01/08 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
小饰品店的创业计划书范文
2013/12/28 职场文书
心得体会怎么写
2013/12/30 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
营销总经理岗位职责
2014/02/02 职场文书
汽车车尾标语大全
2015/08/11 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
DE1107机评
2022/04/05 无线电
MySQL时区造成时差问题
2022/04/13 MySQL