jq table页二级联动
<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页二级联动的更多相关文章
- jq简单城市二级联动实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery学习(六)——使用JQ完成省市二级联动
1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...
- jq实现简单的二级联动下拉框
1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Ajxa验证用户和二级联动的实例(五)
验证用户: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)
JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...
- jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...
- 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- 用AjaxPro实现二级联动
在实际asp.net项目中经常会遇到无刷新二级或者N级(N>=2)联动情况,其实N级联动和二级联动的原理都是一样的,实现这种办法有很多,一种是纯脚本实现(动态生成Array数组),一种 是采用微 ...
随机推荐
- C# 递归与非递归算法与数学公式
1.递归 递归:程序调用自身的编程技巧称为递归(recursion). 优点是:代码简洁,易于理解. 缺点是:运行效率较低. 递归思想:把问题分解成规模更小,但和原问题有着相同解法的问题. 1)下面是 ...
- Unity3D笔记 愤怒的小鸟<七> 小鸟群准备动画
要实现的目标: 1.3只小鸟初始动画 2.完善代码slingShot.js 3.完善代码BirdMoving.js 1.实现3个准备动画:Unity3D内置的动画管理器 1.1.先选择GameObje ...
- tomcat如何配置启动时自动部署webapps下的war包
1.找到 tomcat安装目录/conf/server.xml 2.修改host元素的配置如下: <Host name="localhost" appBase="w ...
- Making Promises With
转:Making Promises With http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-defe ...
- yii---解决post请求出现500错误
在使用yii框架的时候,在发送数据请求的时候,POST请求会出现500错误,这是因为yii2开启了防御csrf的攻击机制,可去先去掉,在控制器里去掉:public $enableCsrfValidat ...
- 大话FLASH和EEPROM
最近在看代码的时候,遇到了一个使用FLASH模拟EEPROM的情况,看到这个我当时是一脸蒙蔽啊,对于一个有时候连FLASH和EEPROM都分不清的人来说,怎么可能读懂用FLASH来模拟EEPROM呢? ...
- Linux--netstat命令
netstat:显示网络状态 语法定义:netstat [-acCeFghilMnNoprstuvVwx] [-A<网络类型>][--ip] 参数说明: -a 或 -all :显示所有连线 ...
- HDU 3045 - Picnic Cows - [斜率DP]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3045 It’s summer vocation now. After tedious milking, ...
- CodeForces - 156B Suspects 逻辑 线性 想法 题
题意:有1~N,n(1e5)个嫌疑人,有m个人说真话,每个人的陈述都形如X是凶手,或X不是凶手.现在给出n,m及n个陈述(以+x/-X表示)要求输出每个人说的话是true ,false or notd ...
- 在选定合适的执行引擎之后,通过敏感字段重写模块改写 SQL 查询,将其中的敏感字段根据隐藏策略(如只显示后四位)进行替换。而敏感字段的隐藏策略存储在 ranger 中,数据管理人员可以在权限管理服务页面设置各种字段的敏感等级,敏感等级会自动映射为 ranger 中的隐藏策略。
https://mp.weixin.qq.com/s/4G_OvlD_5uYr0o2m-qPW-Q 有赞大数据平台安全建设实践 原创: 有赞技术 有赞coder 昨天