// 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. Firefox 安装 Adobe Flashplayer

    3. 安装Adobe Flash Player: Adobe Flash Player的安装比较容易,只要将对应的文档复制到正确的的位置即可,具体的操作 如下: (1) 将libflashplayer ...

  2. Spring Boot：快速入门（二）

    学习完成怎么搭建一个独立Spring Boot项目后,上面是整理出来的一些相关文件以及用途. 原本是一个Excel文件,拷贝到博客园就成了图片,当做几个笔记了,用到的时候可以查阅,也欢迎转载,收藏. ...

  3. 使用cocos creator的过程中碰到的问题记录

    1>编辑器不能识别脚本里面@property类型,显示为null,脚本拖不上去 是@property的类循环引用导致的,可以改变组件类型到cc.Node解决 2> Cannot read ...

  4. textbox 未

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  5. spring boot 如何添加拦截

    添加拦截其它挺简单的,直接上代码吧,我以简单的登陆验证拦截为例 1,先实现一个拦截器 package com.xinyue.interview.gm.filter; import javax.serv ...

  6. 使用PHP实现RSA算法的加密和解密

    本文提供使用RSA算法加密解密数据的PHP程序类(签名和验签的实现方式可以查看使用PHP实现RSA算法的签名和验签 这篇文章),封装了格式化公钥和私钥文件的方法,这样无论使用什么格式的公钥或者私钥都可 ...

  7. 无法加载协定为“NM3.IClrService”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分

    <binding name="NetTcpBinding_IClrService1" receiveTimeout="00:10:00" sendTime ...

  8. 7.JAVA基础复习——JAVA中的设计模式单例模式

    设计模式:是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 总体来说设计模式分为23种三大类: 创建型模式,共 ...

  9. U盘启动安装Centos 7

    ,1.先下载CentOS iso文件,http://centos.ustc.edu.cn/centos/7.6.1810/isos/x86_64/,注意大小是4G左右,之前不知道从哪里下载的iso文件 ...

  10. 关于用IIS在.net平台发布网页的一些坑

    说明:由于需要显示页面的表格的内容,要用pageOffice插件,而装pageoffice之前需要装.net3.5,直接导入. 为什么要分别装.net4.5和.net3.5 ? 都要装?  问题:刚才 ...