// 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. Roomblock: a Platform for Learning ROS Navigation With Roomba, Raspberry Pi and RPLIDAR（转）

      What is this? "Roomblock" is a robot platform consists of a Roomba, a Raspberry Pi 2, a ...

  2. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined)

    C 模拟 题意:给的是一个矩形,然后√2 的速度走,如果走到边上就正常反射,走到角上,暂停反射,我们知道要不循环要不暂停,记录走到的点最短时间 /*************************** ...

  3. PKCS RSA执行标准

    RSA是一种算法,但是,在相关应用的时候,还是需要有一些标准的.这就是pkcs.现在的各种程序中,基本都是遵循这个标准来使用RSA的.最近陆续读取RSA相关的内容进行学习. RSA官网:https:/ ...

  4. racle SQL性能优化

    (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先 ...

  5. 2017-2018-2 20155228 《网络对抗技术》 实验一：PC平台逆向破解

    2017-2018-2 20155228 <网络对抗技术> 实验一:PC平台逆向破解 实验内容 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用 ...

  6. vuex 入坑篇

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 这个状态自管理应用包含 ...

  7. EXCEL 如何实现下拉填充公式，保持公式部分内容不变，使用绝对引用

    EXCEL 如何实现下拉填充公式,保持公式部分内容不变,使用绝对引用 在不想变的单元格前加$符号(列标和列数,两个都要加$),变成绝对引用,默认情况是相对引用 L4固定不变的方式:$L$4 M4固定不 ...

  8. Pdf Convert Image 的解决方案

    brew uninstall ghostscript brew install ghostscript gs -dNOPAUSE -sDEVICE=jpeg -r150 -sOutputFile=./ ...

  9. Springboot 配置类（ @Configuration） 不能使用@Value注解从application.propertyes中加载值以及Environment为null解决方案

    最近遇到个场景,需要在使用@Bean注解定义bean的时候为对象设置一些属性,比如扫描路径,因为路径经常发布新特性的时候需要修改,所以就计划着放在配置文件中,然后通过@ConfigurationPro ...

  10. Windows 7远程桌面设置

    1. 开启防火墙 可在”计算机管理“中,打开"服务和应用程序"-"服务",找到"Windows Firewall",双击"Wind ...