带渐显效果的选项卡菜单
javascript
python
shell
powershell
python模块
php编程
php实例
asp.net
正则表达式
nginx
apache
linux
linux命令
centos
ubuntu
mysql
sql数据库
css教程
首页
脚本编程
网站编程
数据库
系统管理
服务器管理
网页教程
软件教程
电脑教程
手机教程
工具软件
电子书籍
php实例
shell脚本
jquery选择器
python模拟登录
linux命令
nginx
apache
当前位置:
首页
>
脚本特效
>
表单及按钮
> 正文
带渐显效果的选项卡菜单
发布时间:2020-06-21
编辑:
脚本学堂
带渐显效果的选项卡菜单,借助jQuery实现其效果。鼠标点击选项卡之后,出现淡入淡出效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>带渐显效果的选项卡菜单</title> <FCK:meta http-equiv="content-type" content="text/html;charset=gb2312" /> <style type="text/css"> body { background: #f0f0f0; margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #444; } h1 { font-size: 3em; margin: 20px 0; } .container { width: 500px; margin: 10px auto; } ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px;
line-height
: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a { color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; } </style> </head> <body> <div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1" _fcksavedurl="#tab1">tab1</a></li> <li><a href="#tab2" _fcksavedurl="#tab2" id="">tab2</a></li> <li><a href="#tab3" _fcksavedurl="#tab3">tab3</a></li> <li><a href="#tab4" _fcksavedurl="#tab4">tab4</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content" style="display: block;"> test-1 </div> <div id="tab2" class="tab_content" style="display: none;"> test-2 </div> <div id="tab3" class="tab_content" style="display: none;"> test-3 </div> <div id="tab4" class="tab_content" style="display: none;"> test-4 </div> </div> </div> </body> </html>
提示:可修改代码后再运行!
上一篇:
网页表单上实现记住密码提示框
下一篇:
CSS打造的自适应宽度的按钮效果代码
与 带渐显效果的选项卡菜单 有关的文章
CSS打造的自适应宽度的按钮效果代码
本文标题:
带渐显效果的选项卡菜单
本页链接:
http://www.jb200.com/tx/6.html
浏览排行
1
网页表单上实现记住密码提示框
2
个性化的复选框美化效果,让图片代替复选框
3
js判断复选框的选中个数
4
JS实现的Button按钮变色
5
带渐显效果的选项卡菜单
6
CSS打造的自适应宽度的按钮效果代码
7
jquery复选框成对选择和成对取消功能
8
提交后按钮变灰色,点击提交后不可再次点击
栏目分类
菜单导航
网页布局
背景特效
广告代码
图片特效
CSS相关
日期时间
文本链接
表单及按钮
表格相关
计算转换
其它
栏目导航
脚本
服务器
数据库
python
linux
linux命令
shell脚本
javascript
javascript数组
jquery
jquery选择器
jquery事件
jquery菜单
python列表
python爬虫
python模拟登录
php编程
php教程
php面试题
php随机数
php数组
php分页
php正则
php排序
asp.net
批处理
正则表达式
mysql
mysql分页
mysql存储过程
mysql日志
mysql教程
sql数据库
nginx
apache
手机教程
热点文章
1
提交后按钮变灰色,点击提交后不可再次点击
2
js判断复选框的选中个数
3
jquery复选框成对选择和成对取消功能
4
JS实现的Button按钮变色
5
个性化的复选框美化效果,让图片代替复选框
关于本站
|
网站地图
|
联系我们
|
免责声明
|
友情链接
鄂ICP备13010364号-22
CopyRight © 2010-2021
脚本学堂
Jb200.com , All Rights Reserved.