jQuery实现移动端Tab选项卡效果


Posted in Javascript onMarch 15, 2017

效果图:

jQuery实现移动端Tab选项卡效果

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>移动端Tab选项卡</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script>
  $(function() {
   $(".tab a").click(function() {
    $(this).addClass('curr').siblings().removeClass('curr');
    var index = $(this).index();
    number = index;
    $('.nav .content li').hide();
    $('.nav .content li:eq(' + index + ')').show();
   });
  })
 </script>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  div, input, textarea, button, a {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  ul, li, ol{
   list-style: none;
  }
  a {
   color: #323232;
   outline-style: none;
   text-decoration: none;
  }
  .border-b {
   position: relative;
  }
  .border-b:after {
   top: auto;
   bottom: 0;
  }
  .border-t:before, .border-b:after {
   content: '';
   position: absolute;
   left: 0;
   background: #ddd;
   right: 0;
   height: 1px;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
  }
  .nav {
   background-color: #fff;
   text-align: center;
  }
  .nav .tab {
   width: 100%;
   position: relative;
   overflow: hidden;
  }
  .tab a {
   float: left;
   width: 49%;
   height: 2.56rem;
   line-height:2.56rem;
   display: inline-block;
   border-right: 1px solid #e1e1e1;
  }
  .tab a:last-child {
   border-right: 0;
  }
  .tab .curr {
   border-bottom: 2px solid #fc7831;
   color: #fc7831;
  }
  .content ul li {
   display: none;
   padding: 3%;
   width: 94%;
  }
 </style>
</head>
<body>
<div class="nav">
 <div class="tab border-b">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="curr">商品介绍</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" >评价(99)</a>
 </div>
 <div class="content">
  <ul>
   <li style="display: block">商品介绍</li>
   <li>评价</li>
  </ul>
 </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
小程序关于请求同步的总结
May 05 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
利用vue.js插入dom节点的方法
Mar 15 #Javascript
js实现彩色条纹滚动条效果
Mar 15 #Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 #Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 #Javascript
字太多用...代替的方法(两种)
Mar 15 #Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 #Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 #Javascript
You might like
初识PHP
2014/09/28 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python 加密的实例详解
2017/10/09 Python
python验证码识别实例代码
2018/02/03 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python装饰器使用实例详解
2019/12/14 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
详解rem 适配布局
2018/10/31 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
C面试题
2015/10/08 面试题
链表面试题-一个链表的结点结构
2015/05/04 面试题
大学军训感言400字
2014/03/11 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
Python 线程池模块之多线程操作代码
2021/05/20 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript