javascript实现tab响应式切换特效


Posted in Javascript onJanuary 29, 2016

本文实例讲解了tab响应式切换效果,利用js对样式进行动态切换即可。 多的不说,请看代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
<title>tab响应式切换效果</title> 
<link rel="stylesheet" href="css/tab.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 
<body> 
<!-- 代码部分begin --> 
<div class="wrap" height="100%"> 
  <div class="tabs" height="20%"> 
    <a href="#" class="active">tab1</a> 
    <a href="#" >tab2</a> 
    <a href="#" >tab3</a> 
  </div>   
  <div class="swiper-container" height="80%"> 
    <div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
      <div class="content-slide contentin" id="contentref1"> 
      tab内容一 
     </div> 
     </div> 
    <div class="swiper-slide"> 
      <div class="content-slide" id="contentref2"> 
       tab内容二 
      </div> 
     </div> 
    <div class="swiper-slide"> 
      <div class="content-slide" id="contentref3"> 
       tab内容三 
      </div> 
     </div> 
   </div> 
  </div> 
</div> 
<script> 
//$("#contentref1").load("CheckRecord1.html"); //初始化加载tab1 
$(".tabs a").each(function(index){ 
    //每一个包装a的jquery对象都会执行function中的代码 
    //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值 
    //有了index的值之后,就可以找到当前标签对应的内容区域 
    $(this).click(function(){   
      var liNode = $(this); 
      //将原来显示的内容区域进行隐藏 
      $(".tabs .active").removeClass("active"); 
      //对有tabin的class定义的li清除tabin的class 
      $(".contentin").removeClass("contentin"); 
      //当前标签所对应的内容区域显示出来 
      $("div").eq(index).addClass("contentin"); 
      $("div.content-slide:eq(" + index + ")").addClass("contentin"); 
      liNode.addClass("active");  
       
      if (index == 0) { 
        //装入静态完成页面 
        //$("#contentref1").load("CheckRecord1.html"); 
      } else if (index == 1) { 
        //装入动态部分页面 
        //$("#contentref2").load("CheckRecord.jsp"); 
      } else if (index == 2) { 
        //装入远程数据(这里也是一个动态页面输出的数据) 
        //$("#contentref1").load("TabData.jsp") 
      } 
    }); 
  }); 
</script> 
<!-- 代码部分end --> 
</body> 
</html>

tab.css

body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;background:#eee;} 
.wrap{margin:0 auto 0 auto;} 
.tabs{height:25px;} 
.tabs a{display:block;float:left;width:33.33%;color:#333;text-align:center;background:#eee;line-height:25px;font-size:16px;text-decoration:none;} 
.tabs a.active{color:#fff;background:#CDC8B1;border-radius:5px 5px 0px 0px;} 
.swiper-container{background:#CDC8B1;height:100%;border-radius:0 0 5px 5px;width:100%;border-top:0;} 
.swiper-slide{height:100%;width:100%;background:none;color:#fff;} 
div.content-slide {padding:40px;display: none;} 
div.contentin {display: block;}

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 #Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 #Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 #Javascript
Angular实现form自动布局
Jan 28 #Javascript
理解javascript中的MVC模式
Jan 28 #Javascript
jQuery获取checkbox选中的值
Jan 28 #Javascript
探讨JavaScript语句的执行过程
Jan 28 #Javascript
You might like
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
python实现ipsec开权限实例
2014/11/11 Python
Python断言assert的用法代码解析
2018/02/03 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
学习Django知识点分享
2019/09/11 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
C面试题
2015/10/08 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
财产公证书格式
2014/04/10 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
就业协议书怎么填
2014/09/15 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android