<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简版选项卡</title>

<style>


    * {  margin: 0;  padding: 0  }
    .tabWrap {  width: 300px;  height: 400px;  margin: 50px auto;  box-sizing: border-box;  overflow: hidden;  }
    /*tab按钮*/
    .tabNav {  width: 300px;  height: 50px;  background: #e5e5e5;  }
    .tabNav .tab{  width: 100px;  height: 50px;  line-height: 50px;  float: left;  text-align: center;  cursor: pointer;  }
    .active{  background: #00AEFF;  }
    /*tab内容*/
    .tabCont{  width: 300px;  height:350px;  }
    .tabCont .cont{  width: 300px;  height: 350px;  background: #929292;  display: none;  text-align: center;  }
    .tabCont .show{  display: block;  }
</style>


</head>
<body>
　　<div class="tabWrap">


    　　<div class="tabNav">
        　　<div class="tab active">tab1</div>
        　　<div class="tab">tab2</div>
        　　<div class="tab">tab3</div>
    　　</div>
    　　<div class="tabCont">
        　　<div class="cont show">tab1内容</div>
        　　<div class="cont">tab2内容</div>
        　　<div class="cont">tab3内容</div>
    　　</div>
　　</div>


</body>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


<script>
    $(function () {


　　　　//调用


        fn($(".tabNav"),$(".tabCont"),"click");
    });


/*
*参数1:按钮层盒子 参数2:内容层盒子 参数3:指定触发事件
*/


    function fn(tab,tabCont,event) {
        var tabChild = tab.children();
        tabCont.children().hide().eq(0).show();
        tabChild.each(function (index) {
            $(this).on(event,function () {
                tabChild.removeClass("active").eq(index).addClass("active");
                tabCont.children().hide().eq(index).show();
            });
        })
    }
</script>


</html>
												


											
基于JQ的简版选项卡记录的更多相关文章
	

    
								
  1. Jenkins日常运维笔记-重启数据覆盖问题、迁移、基于java代码发版(maven构建)
		
    之前在公司机房部署了一套jenkins环境,现需要迁移至IDC机房服务器上,迁移过程中记录了一些细节:1)jenkins默认的主目录放在当前用户家目录路径下的.jenkins目录中.如jenkins使 ...
    
		
    2. 
						
  2. FFmpeg简易播放器的实现-最简版
		
    本文为作者原创:https://www.cnblogs.com/leisure_chn/p/10040202.html,转载请注明出处 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
    
		
    3. 
						
  3. 升级Windows 10 正式版过程记录与经验
		
    升级Windows 10 正式版过程记录与经验 [多图预警]共50张,约4.6MB 系统概要: 预装Windows 8.1中文版 64位 C盘Users 文件夹已经挪动到D盘,并在原处建立了符号链接. ...
    
		
    4. 
						
  4. java语言实现简单接口工具--粗简版
		
    2016注定是变化的一年,忙碌.网红.项目融资失败,现在有点时间整整帖子~~ 目标: 提高工作效率与质量,能支持平台全量接口回归测试与迭代测试也要满足单一接口联调测试. 使用人员: 测试,开发 工具包 ...
    
		
    5. 
						
  5. 基于jq图片居中插件 [center]
		
    最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...
    
		
    6. 
						
  6. 基于jq插件开发及弹窗实例
		
    基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼. 首先我们介绍$.fn. $.fn是指jquery的命名空间,加上fn上的方法及属 ...
    
		
    7. 
						
  7. python练习_购物车（简版）
		
    python练习_购物车(简版) 需求: 写一个python购物车可以输入用户初始化金额 可以打印商品,且用户输入编号,即可购买商品 购物时计算用户余额,是否可以购买物品 退出结算时打印购物小票 以下 ...
    
		
    8. 
						
  8. 按行切割大文件（linux split 命令简版）
		
    按行切割大文件(linux split 命令简版) #-*- coding:utf-8 -*- __author__ = 'KnowLifeDeath' ''' Linux上Split命令可以方便对大 ...
    
		
    9. 
						
  9. 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil
		
    封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil,代码比较简单,主要是把MongoTarget的配置.FileTarget的配置集成到类中,同时利用缓存依赖来判断是否需要重新创 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【网络编程】TCP网络编程
			
    TCP网络程序设计 一.模型函数化 图片:TCP编程模型 1.1 创建套接字Socket #include <sys/types.h> /* See NOTES */ #include & ...
    
			
    2. 
						
  2. “云中论道”之——使用开源技术和Azure公有云服务快速搭建云端IoT解决方案（上）
			
    “云中论道”技术课堂第一课开讲啦!微软各路技术咖们齐聚一堂,为大家带来干货不断!作为“云中论道“课堂的开课之作,我们首先邀请到了微软Azure专家级的架构师:槐长清,他为我们带来了关于“使用开源技术和 ...
    
			
    3. 
						
  3. c# 命名空间之System.IO（继承关系）
			
    System.IO 命名空间包含允许:读写文件.数据流的类型以及提供基本文件和目录支持的类型. 在这个命名空间中主要的类有: 字节流:Stream.BufferedStream.MemoryStrea ...
    
			
    4. 
						
  4. Oracle 死锁处理
			
    一.数据库死锁的现象程序在执行的过程中,点击确定或保存按钮,程序没有响应,也没有出现报错.二.死锁的原理当对于数据库某个表的某一列做更新或删除等操作,执行完毕后该条语句不提交,另一条对于这一列数据做更 ...
    
			
    5. 
						
  5. Android MVP 简析
			
    原地址:https://segmentfault.com/a/1190000003927200 在Android中应用MVP模式的原因与方法的简析,写的简单易懂.
    
			
    6. 
						
  6. 理解Underscore中的uniq函数
			
    uniq函数,是Underscore中的一个数组去重函数,给它传递一个数组,它将会返回该数组的去重副本. 1 ES6版本去重 在ES6版本中,引入了一个新的数据结构——set,这是一种类似数组的数据结 ...
    
			
    7. 
						
  7. Override和Overload的含义去区别
			
    java中的继承,方法覆盖(重写)override与方法的重载overload的区别  方法的重写(Overriding)和重载(Overloading)是Java多态性的不同表现.   重写(Ove ...
    
			
    8. 
						
  8. 洛谷 P4593 【[TJOI2018]教科书般的亵渎】
			
    题目分析 一眼看上去就像是一个模拟题目,但是\(n\)的范围过大. 冷静分析一下发现难点在于如何快速求出幂和. 考虑使用伯努利数. \(B_0=1\) \(B_n=-\frac{1}{n+1}\sum ...
    
			
    9. 
						
  9. BIND简易教程（0）：在Ubuntu下源码安装BIND（其实跟前面的教程没太大关系）
			
    之前介绍过BIND的基本使用啦.关于BIND的入门级使用方法见:http://www.cnblogs.com/anpengapple/p/5877661.html简易教程系列,本篇只讲BIND安装.  ...
    
			
    10. 
						
  10. 20145238-荆玉茗《网络对抗技术》MSF基础应用
			
    20145238荆玉茗-<网络攻防>-MSF基础应用 实践过程 MS08_067漏洞渗透攻击实践(主动攻击) 实验工具: kali&windows xp 将xp的网络设为NAT模式 ...
    
			
    11.