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 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 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内置函数使用指南
2014/11/27 PHP
smarty自定义函数用法示例
2016/05/20 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
python 写的一个爬虫程序源码
2016/02/28 Python
python将txt文件读取为字典的示例
2018/12/22 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
未婚证明范本
2015/06/15 职场文书
教师节祝酒词
2015/08/11 职场文书
学生病假条范文
2015/08/17 职场文书
2016年党建工作简报
2015/11/26 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python