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 16 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
react高阶组件添加和删除props
Apr 26 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
Terran兵种介绍
2020/03/14 星际争霸
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
Bootstrap表单布局
2016/07/19 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python3去掉string中的标点符号方法
2019/01/22 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
wxPython色环电阻计算器
2019/11/18 Python
python多维数组分位数的求取方式
2020/03/03 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
大专生自荐信
2013/10/04 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
同事欢送会致辞
2015/07/31 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
如何通过一篇文章了解Python中的生成器
2022/04/02 Python