jQuery实现滚动切换的tab选项卡效果代码


Posted in Javascript onAugust 26, 2015

本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码。分享给大家供大家参考。具体如下:

这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料。

先来看看运行效果截图:

jQuery实现滚动切换的tab选项卡效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tab选项卡动态切换</title>
<style>
* {
 margin: 0;
 padding: 0;
}
body {
font-family: helvetica, tahoma, Sans-serif;
 font-size: 13px;
 background: url(images/bgdemo1.jpg) repeat;
}
a { 
 text-decoration: none;
}
h2 {
 font-family: Helvetica, tahoma, Sans-serif;
 font-size: 25px;
 font-weight: bold;
 text-shadow: 0 1px 1px white;
}
p {
 text-shadow: 0 1px 1px white;
}
#navbar {
 margin: 20px 0 0 40px;
 width: 650px;
 font-weight: bold;
}
ul li{
 display: inline-block;
}
ul li a {
float:left
 position: relative;
 display: block;
 width: 150px;
 text-align: center;
}
.active a{
 padding: 28px 0 20px 0;
 background: -webkit-gradient(linear, left top, left bottom, from(#db0000), to(#9b0000));
 background: -moz-linear-gradient(top center, #db0000, #9b0000);
 border: 1px solid #8d0000;
 text-shadow: 0 1px 1px black;
 -webkit-border-radius: 10px 10px 0 0;
 -webkit-background-clip: padding-box;
 -webkit-box-shadow: inset 0 0 1px #fd0000;
 -moz-border-radius: 10px 10px 0 0;
 -moz-background-clip: padding-box;
 -moz-box-shadow: inset 0 0 1px #fd0000;
 margin-left: -5px;
 z-index: 2;
 color: white;
 text-shadow: 0 1px 1px black;
}
.active a:focus {
 outline: none;
}
.inactive a:hover {
 background: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#ddd));
 background: -moz-linear-gradient(top center, #ddd, #eee);
}
.inactive a {
 color: #222;
 text-shadow: 0 1px 1px white;
 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
 background: -moz-linear-gradient(top center, #eee, #ddd);
 -webkit-box-shadow: inset 0 0 5px white;
 -moz-box-shadow: inset 0 0 5px white;
 padding: 20px 0;
 -webkit-box-shadow: inset 0 0 5px white;
 -moz-box-shadow: inset 0 0 5px white;
 border: 1px solid #ccc;
 margin-left: -5px;
 z-index: 1;
}
.inactive a:focus {
 outline: none;
}
span.notification {;
 position: absolute;
 padding: 5px;
 margin-top: -6px;
 color: white;
 min-width: 15px;
 text-align: center;
 border: 1px solid #000;
 background: -webkit-gradient(linear, left top, left bottom, from(#2a2a2a), to(#222));
 background: -moz-linear-gradient(top center, #2a2a2a, #222);
 -webkit-box-shadow: inset 0 0 1px #333;
 -moz-box-shadow: inset 0 0 1px #333;
 text-shadow: 0 -1px 1px black;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 margin-left: 10px;
}
#slider {
 width: 555px;
 background: rgba(250,250,250,0.3);
 padding: 30px 25px 30px 25px;
 line-height: 25px;
 margin-left: 35px;
}
.back {
  font-weight: bold;
  padding: 20px 0 30px 0;
  line-height: 25px;
  margin-left: 35px;
}
.back a, .back a:visited{
  padding: 0 0 3px 0;
  color: #000000;
  border-bottom: 1px solid #ffffff;
}
.back a:hover, .back a:visited:hover{
  padding: 0 0 3px 0;
  color: #990000;
  border-bottom: 1px solid #000000;
}
.back a:active{
  padding: 0 0 3px 0;
  color: #000000;
  border-bottom: 4px solid #000000;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('li').click(function(){
  var number = $(this).index();
  $('h2').slideUp(400).eq(number).slideDown(400);
  $('p').slideUp(400).eq(number).slideDown(400);
  $('li').removeClass('inactive').addClass('active');
  $('li').not(this).removeClass('active').addClass('inactive');
 });
 $('h2').not(':first').hide();
 $('p').not(':first').hide();
});
</script>
</head> 
<body>
<div id="navbar">
 <ul>
  <li class="active"><a href="#" title="Projects">Projects<span class="notification">34</span></a></li>
  <li class="inactive"><a href="#" title="Contacts">Contacts</a></li>
  <li class="inactive"><a href="#" title="Earnings">Earnings</a></li>
  <li class="inactive"><a href="#" title="To-do">To-do<span class="notification">100</span></a></li>
 </ul>
</div>
<div id="slider">
 <h2>Projects</h2>
 <p>Projects内容区</p>
 <h2>Contacts</h2>
 <p>Contacts内容区</p>
 <h2>Earnings</h2>
 <p>Earnings内容区</p> 
 <h2>To-do</h2>
 <p>To-do内容区</p>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
表格 隔行换色升级版
Nov 07 Javascript
jQuery技巧总结
Jan 01 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
bootstrap table小案例
Oct 21 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
小程序如何构建骨架屏
May 29 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 #Javascript
jQuery带时间的日期控件代码分享
Aug 26 #Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 #Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 #Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 #Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 #Javascript
纯javascript实现分页(两种方法)
Aug 26 #Javascript
You might like
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python简单分割文件的方法
2015/07/30 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
基于Python实现粒子滤波效果
2020/12/01 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
会计专业个人自我鉴定
2014/03/21 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
企业职业病防治方案
2014/05/29 职场文书
护士医德医风自我评价
2014/09/15 职场文书
六查六看六改心得体会
2014/10/14 职场文书
店铺转让协议书
2014/12/02 职场文书
慰问信范文
2015/02/14 职场文书
公司表扬信格式
2015/05/04 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
JavaScript 反射学习技巧
2021/10/16 Javascript
Redis实现短信验证码登录的示例代码
2022/06/14 Redis