// if ($(this).hasClass('activeC')) {

        //   $(this).removeClass('activeC')

        // } else {

        //   $('.nav-children div').removeClass('activeC')

        //   $(this).addClass('activeC')

        // }

首先引入jquery.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!--自动适应手机屏幕宽度的方法-->

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <link rel="stylesheet" href="css/index.css">

    <script src="js/jquery-3.3.1.min.js"></script>

    <title>****</title>

</head>

<body style="background: #e6e6e6;">

    <div class="content">

        <div class="contentLeft">

            <span class="contentT on">摄像头1</span>

            <span class="contentT">摄像头2</span>

            <span class="contentT">摄像头3</span>

            <span class="contentT">摄像头4</span>

        </div>

        <div class="contentRight">

            <div class="contentD active">

            </div>

            <div class="contentD ">

            </div>

            <div class="contentD">

            </div>

            <div class="contentD">

            </div>

        </div>

    </div>

</body>

<script>

    $(document).ready(function () {

        // tab切换

        $(".contentT").off("click").on("click", function () {

            var index = $(this).index();

            $(this).addClass("on").siblings().removeClass("on");

            $(".contentD").eq(index).addClass("active").siblings().removeClass("active");

        });

    })

</script>

</html>
.content{

    margin-top: 240px;

    width: %;

    display: flex;

}

.contentLeft{

    width: %;

    margin-right: 20px;

    color: #;

    text-align: center;

}

.contentT{

    display: inline-block;

    height: 60px;

    line-height: 60px;

    background: white;

    width: %;

}

.contentT.on{

    display: inline-block;

    color: #8ec21f;

    background: #e6e6e6;

}

.contentRight{

    flex: ;

    background: #e6e6e6;

    margin-right: 20px;

}

.contentD{

    display: none;

}

.contentD.active{

    display: block;

}

jquery tab切换的更多相关文章

  1. jquery TAB切换小插件

    //tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { ...

  2. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  3. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

  5. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  6. jquery 回车切换 tab功能

    挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...

  7. 一款jquery写出来的tab切换

    当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...

  8. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

  9. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

随机推荐

  1. ORACLE 数据库管理

    [故障处理]ORA-12162: TNS:net service name is incorrectly specified 本文将给大家阐述一个因未设置系统环境变量ORACLE_SID导致ORA-1 ...

  2. linux 系统管理11 ——系统安全及应用

    一.基本安全措施 1.系统账号清理 (1).将非登陆用户的shell设为/sbin/nologin 方法一.usermod -s 方法二.chsh命令,交互式修改 方法三.chsh -s usermo ...

  3. 详解Nginx服务器配置

    #运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes ; #全局错误日志及PID文件 #error_log logs/error.log; ...

  4. 读HashMap 源码(jdk11)的见解

    如果想系统详细的了解HashMap请移步各大佬博客.这篇文章只是个人的一些见解. 数组+链表 或 数组+红黑树.这种说法感觉有迷惑性. 之前看博客都说 HashMap 的存储是数组+链表(jdk6), ...

  5. 【论文速读】Shitala Prasad_ECCV2018】Using Object Information for Spotting Text

    Shitala Prasad_ECCV2018]Using Object Information for Spotting Text 作者和代码 关键词 文字检测.水平文本.FasterRCNN.xy ...

  6. VC6中函数点go to definition报告the symbol XXX is undefined

    删除Debug中的bsc文件,再重建所有文件即可,在该函数处点击go to definition会提示重建.bsc文件,如果不行,多操作几次.

  7. react问题解决的一些方法

    原文链接: https://segmentfault.com/a/1190000007811296?utm_source=tuicool&utm_medium=referral 初学者对Rea ...

  8. Sed工作原理

    Sed工作原理   sed是一个非交互式的流编辑器.所谓非交互式,是指使用sed只能在命令行下输入编辑命令来编辑文本,然后在屏幕上查看输出:而所谓流编辑器,是指sed每次只从文件(或输入)读入一行,然 ...

  9. java基础5 (一维)数组和二维数组

    本文知识点(目录): 一维数组(一维数组的概念.优点.格式.定义.初始化.遍历.常见异常.内存分析以及常见操作(找最大值.选择排序.冒泡排序等等))    二维数组(二维数组的遍历.排序.查找.定义. ...

  10. JS 全选、全不选、反选

    function checkReturn(obj) { var objIds = obj.value; //当没有选中某个子复选框时,checkboxall取消选中 if (!$("#sub ...