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中setTimeout的问题解决方法
May 08 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
基于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集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
js创建对象的方式总结
2015/01/10 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
基于Python检测动态物体颜色过程解析
2019/12/04 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
大学毕业感言200字
2014/03/09 职场文书
企业指导教师评语
2014/04/28 职场文书
机械专业技术员求职信
2014/06/14 职场文书
公司活动总结怎么写
2014/06/25 职场文书
村党建工作汇报材料
2014/11/02 职场文书
班主任先进事迹材料
2014/12/17 职场文书
房产公证书格式
2015/01/26 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
红色经典电影观后感
2015/06/18 职场文书
新教师教学工作总结
2015/08/14 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers
create-react-app开发常用配置教程
2022/06/25 Javascript