<div class="layerRtb layerRtb-threecolumn">
<div class="clearfix layerRtb-head uiTitle2">
<i class="uiTitle-icon"></i>
开工准备详情
<i class="fr rig_close">×</i>
</div>
<div class="">
<div class="p20">
<div class="Tab">
<ul class="TabUl clear">
<li class="active2 aa">安全准备</li>
<li class="aa">摄像头准备</li>
<li class="aa">文明准备</li>
<li class="aa">质量准备</li>
</ul> <div class="side">
<span class="active1 start">消防安全</span>|<span class="start">用电安全</span>
</div> <div class="TabU clear layerRtb-scroll">
<div class="main0"> <div class="one">
<ul class="up">
<li data-src = "images/pic/1.jpeg"><img src="data:images/pic/1.jpeg" alt="" /></li>
<li data-src = "images/pic/2.jpeg"><img src="data:images/pic/2.jpeg" alt="" /></li> </ul> <p class="save">消防安全</p>
<p class="check">验收标准验收标准验收标准验收标准验收标准验收标准标准验收标准</p> <ol class="down">
<li data-src = "images/pic/3.jpeg"><img src="data:images/pic/3.jpeg" alt="" /></li>
<li data-src = "images/pic/4.jpeg"><img src="data:images/pic/4.jpeg" alt="" /></li>
</ol>
</div> <div class="TabCon p10 hide">
1-2
</div>
</div> <div class="main1"> <div class="TabCon p10 hide">
2-1
</div> <div class="TabCon p10 hide">
2-2
</div> </div> <div class="main2">
<div class="TabCon p10 hide">
3-1
</div>
<div class="TabCon p10 hide">
3-2
</div>
</div> <div class="main3">
<div class="TabCon p10 hide">
4-1
</div>
<div class="TabCon p10 hide">
4-2
</div>
</div> </div> </div>
</div>
</div>
<div class="layerRtb-footer clearfix">
<div class="fr">
<input type="button" value="确定" class="uiBtn-blue uiBtn-small fl layerSureBtn"/>
<input type="button" value="取消" class="uiBtn-gray uiBtn-small fl ml10 layerCancelBtn"/>
</div>
</div>
</div>
$(function(){
var ind;
$(".main0").find('div').eq(0).stop(true).show();
$('.TabUl li').each(function(i,item){
$(this).on('click',function(e){
ind=i;
console.log(ind)
var texts=$(e.target).text();
$(this).addClass('active2').siblings().removeClass('active2');
$('.start').text(texts);
$('.side span').eq(0).addClass('active1').siblings().removeClass('active1');
$(".main"+ind).find('div').eq(0).stop(true).show().siblings().stop(true).hide();
$('.TabU').children().eq(ind).show().siblings().hide(); });
}); $('.side span').each(function(index){
$(this).on('click',function(){
console.log(ind)
if(ind=='undefined'||ind==null){
ind=0;
$(".main"+ind).find('div').eq(index).show().siblings().hide();
}
$('.TabCon').hide();
$(this).addClass('active1').siblings().removeClass('active1');
$(".main"+ind).find('div').eq(index).show().siblings().hide(); })
})
});

jq table页二级联动的更多相关文章

  1. jq简单城市二级联动实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

  3. jq实现简单的二级联动下拉框

    1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head>     <meta charse ...

  4. Ajxa验证用户和二级联动的实例(五)

    验证用户: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  5. JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  6. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  7. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  8. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  9. 用AjaxPro实现二级联动

    在实际asp.net项目中经常会遇到无刷新二级或者N级(N>=2)联动情况,其实N级联动和二级联动的原理都是一样的,实现这种办法有很多,一种是纯脚本实现(动态生成Array数组),一种 是采用微 ...

随机推荐

  1. 关于servlet3.0中的异步servlet

    刚看了一下维基百科上的介绍,servlet3.0是2009年随着JavaEE6.0发布的: 到现在已经有六七年的时间了,在我第一次接触java的时候(2011年),servlet3.0就已经出现很久了 ...

  2. 23种设计模式之单例模式(Singleton)

    单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法. public class SingleTon { private static Si ...

  3. Centos 7网络文件系统nfs服务的安装与配置

    实验环境>>>>>>>>> nfs服务端:(nfs-server)192.168.100.2 nfs客户端:(nfs-client)192.168 ...

  4. kvm虚拟机的重命名

    1.查看所有的kvm虚拟机 [root@5201351_kvm ~]# virsh list --all 2.重命名kvm虚拟机最好是将虚拟机先关机,然后再导出其xml文件 [root@5201351 ...

  5. 【BZOJ4919】[Lydsy六月月赛]大根堆 线段树合并

    [BZOJ4919][Lydsy六月月赛]大根堆 Description 给定一棵n个节点的有根树,编号依次为1到n,其中1号点为根节点.每个点有一个权值v_i. 你需要将这棵树转化成一个大根堆.确切 ...

  6. 【BZOJ1814】Ural 1519 Formula 1 插头DP

    [BZOJ1814]Ural 1519 Formula 1 题意:一个 m * n 的棋盘,有的格子存在障碍,求经过所有非障碍格子的哈密顿回路个数.(n,m<=12) 题解:插头DP板子题,刷板 ...

  7. dinner vs supper

    用dinner还是supper? 据我唯一认识一个美国人……讲,至少在美国他们用dinner,supper也许在英国更常用些. 他在小时候都没听说过supper这个词…… 另外,have dinner ...

  8. 基于Token的多平台身份认证价格设计

    1   概述 在存在账号体系的信息系统中,对身份的鉴定是非常重要的事情. 随着移动互联网时代到来,客户端的类型越来越多, 逐渐出现了 一个服务器,N个客户端的格局 . 不同的客户端产生了不同的用户使用 ...

  9. TOP100summit 2017:亚马逊Echo音箱能够语音识人,华人工程师揭秘设计原理

      本文编辑:Cynthia 2017年,人工智能的消费产品落地聚焦在了智能音箱上,谷歌.亚马逊纷纷推出智能音箱产品,国内的阿里巴巴推出天猫精灵,小米推出小米AI音箱.智能音箱通过语音可以发出指令,未 ...

  10. VMware esxi 5.5装机方案

    1.测试环境下,VMware esxi 5.5环境基本配置如下(主机环境以实际为准): 2.裸机安装VMware esxi 5.5步骤: 1)将ESXi安装程序CD/DVD 插入 CD/DVD-ROM ...