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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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
php不用正则采集速度探究总结
2008/03/24 PHP
php表单提交问题的解决方法
2011/04/12 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
安全生产月演讲稿
2014/05/09 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
立春观后感
2015/06/18 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书