100素材网
首页
jquery特效
网页素材
网页特效
网站模板
图片素材
关键字搜索
button.css
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
站长空间
CSS3 动画大全在线演示
网站后台管理系统
button.css
由
100素材网
开发，欢迎广大前端码农使用。有好的建议欢迎给我们
留言
哦！
Nicole McIntyre
发布于
滑动选项卡
网页制作
图层代码
js网页hover滑动选项卡特效代码
文章来源：
100素材网
更新时间：
2014-04-19 20:19:21
滑动选项卡
js滑动选项卡
滑动门
滑动门代码
<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title></title> <style type="text/css"> <!-- body,div,ul,li{ padding:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none;} /*选项卡1*/ #www_a{ width:460px; margin:0px; padding:0px; margin:0 auto;} /*选项卡2*/ #www_a_2{ width:576px; margin:0px; padding:0px; margin:0 auto;} /*菜单class*/ .a { width:100%; background: #CCCCCC; height:28px; line-height:28px; } .a ul{ margin:0px; padding:0px; } .a li{ float:left; display:block; cursor:pointer; width:114px; text-align:center; color:#949694; font-weight:bold; color:#FFFFFF; } .a li.hover{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; background:#FF0000; font-weight:bold; font-weight:bold; height:27px; line-height:27px; } .www_a_3{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:center; padding-top:8px; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("zzjs_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <div id="www_a"> <div class="a"> <ul> <li id="a1" onmouseover="setTab('a',1,4)" class="hover">标题一</li> <li id="a2" onmouseover="setTab('a',2,4)" >标题二</li> <li id="a3" onmouseover="setTab('a',3,4)">标题三</li> <li id="a4" onmouseover="setTab('a',4,4)">标题四</li> </ul> </div> <div class="www_a_3"> <div id="zzjs_a_1" class="hover">内容一</div> <div id="zzjs_a_2" style="display:none">内容二</div> <div id="zzjs_a_3" style="display:none">内容三</div> <div id="zzjs_a_4" style="display:none">内容四</div> </div> </div> </body> </html>
在线演示
浏览次数
次
react源码系统
vue源码系统
vue + typeScript源码系统
上一篇文章：
网页抽奖js特效代码
下一篇文章：
精美抽奖机js网页特效代码
推荐阅读：
html5 web mobile手机网页视频播放器代码
制作云标签特效的jQuery tagcloud插件下载
css3圆角二级导航菜单jQuery滑动收缩展开特效代码
网页滑动返回顶部jQuery插件代码
bootstrap网页图片上传控件样式特效代码
网页table表格头部和左侧固定的jquery插件代码
当滚动条滚动时图片悬浮固定于网页顶部的jquery特效代码
jquery时钟秒表倒计时组件js代码
相关代码：
精美抽奖机js网页特效代码
瀑布流样式js特效代码
可调整宽高大小js特效代码的图层
弹出可随页面自适应大小的js特效图层窗口代码
动态展开收缩网页图层js特效代码
精美展开与收缩的js特效图层代码
动态文字变换的js特效信息提示效果代码
js特效鼠标拖动图层网页代码
纯css弹出遮罩层代码
js特效title信息提示框代码
兼容所有浏览器的鼠标拖动图层js特效代码
悬浮层hover鼠标感应效果js特效
标签分类
瀑布流
幻灯片
焦点图
导航条
404
鼠标特效
css3按钮
checkBox
js相册特效
滚动条
抽奖
日历
圆盘抽奖
圆盘时钟
菜单栏
广告
提示文字
图片文字
css3圆角
选项卡
收缩展开
计时器
网页布局
响应式网站模板
树形菜单
木马旋转
表单美化
登录界面
下拉列表
图片叠加
网页背景
缩略图
放大镜图片
select美化
图片拖动
大图切换
日历选择器
table
拖拽
对联广告
html5游戏
二维码
图片延迟加载
进度条
搜索框
提示框
表单验证
倒计时
图片悬停
jQuery 选择器
统计图
柱状图
折线图
二级联动
视频播放器
文字无缝滚动
文字特效
图片动画
固定导航
图片手风琴
图片旋转
标签云
编辑器
分页插件
单选按钮
tab切换
图片裁剪
计算器
贪吃蛇
俄罗斯方块
加载动画
分页
网页按钮
css3阴影
css3
css3动画
Tree树形
游戏场景
渐变背景
图片渐变切换
canvas
表头固定
css3文字
筛选项
月亮
css3背景
svg
图片滑动
css3翻转
图片滚动
文字滚动
网页特效
3d立方体
返回顶部
刮刮乐
锚点滑动
时间代码
星级评分
vue插件
悬浮固定
CSS3和Html5
图表与图形
表单验证
导航菜单
table选项卡
视频播放器
日期和时间
返回顶部
图层代码
滚动代码
幻灯片
文字特效
图片放大镜
juqery焦点图
瀑布流
广告悬浮代码
在线客服
网页导航菜单
时间倒计时
Jquery教程
wap手机网站教程
javascript教程
CSS3教程
网页基础
php
html
图片表情
手机网站模板
放大镜图片
网页小游戏
按钮开关
bootstrap插件
loading
vue插件
站长空间
站长博客
推荐阅读：
