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 相关文章推荐
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
javascript this详细介绍
Sep 19 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
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
Content-type 的说明
2006/10/09 PHP
PHP在Web开发领域的优势
2006/10/09 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP写日志的实现方法
2014/11/05 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
jQuery基础知识小结
2014/12/22 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
用Django写天气预报查询网站
2018/10/21 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python将视频转换为全字符视频
2019/04/26 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Python项目打包成二进制的方法
2020/12/30 Python
python math模块的基本使用教程
2021/01/16 Python
会计助理的岗位职责
2013/11/29 职场文书
车辆委托书范本
2014/10/05 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python