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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 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
PHP常用代码
2006/11/23 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
js select option对象小结
2013/12/20 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
介绍一下linux的文件权限
2012/02/15 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
诚信考试倡议书
2014/04/15 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
升学宴学生答谢词
2015/01/05 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
springboot读取resources下文件的方式详解
2022/06/21 Java/Android
Python first-order-model实现让照片动起来
2022/06/25 Python