关于获取多个id的用法
一.子页面中的写法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>山东省科协</title>
<meta name="description" content="省科协">
<meta name="keywords" content="省科协、政府门户">
<!-- start 公用样式 -->
<link rel="stylesheet" type="text/css" href="../css/second.css"/>
</head>
<script src="layer/jquery.js"></script>
<script src="layer/layer.min.js"></script>
<script src="layer/extend/layer.ext.js"></script>
<script>
function zhtest(zid){
layer.photosPage({
parent: document.getElementById(zid)
});
}
</script>
注释:1.zid为虚拟变量可以传递任何id
2.括号内不加引号表示变量表示一类,加引号是字符串表示一种固定值。
<body onload="zhtest('zh12');zhtest('zh11');" >
<div class="yjgg">
<div class="yjgg_lis">
<div class="line_466"></div>
<ul class="xs_active_img" >
<li id="zh11" onclick="zhtest('zh11')">
<a target="_top">
<img src="data:images/dm1.jpg" class="across"/>
<img src="data:images/dm2.jpg" class="across" style="display: none;" />
</a>
</li>
<li id="zh12" onclick="zhtest('zh12')">
<a target="_top">
<img src="data:images/cq1.jpg" class="across"/>
<img src="data:images/cq2.jpg" class="across" style="display: none;"/>
<img src="data:images/cq3.jpg" class="across" style="display: none;"/>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
二.iframe框架页面中的写法
主页面
<script src="layer/jquery.js"></script>
<script src="layer/layer.min.js"></script>
<script src="layer/extend/layer.ext.js"></script>
<script>
function zhtest(zid){
layer.photosPage({
//html:'<div style="padding:20px;">这里传入自定义的html<p>相册支持左右方向键,支持Esc关闭</p><p>另外还可以通过异步返回json实现相册。更多用法详见官网。</p><p>'+ unescape("%u7D20%u6750%u5BB6%u56ED%20-%20sc.admin5.com") +'</p><p id="change"></p></div>',
//title: '标题',
//id: 100, //相册id,可选
parent: document.getElementById('iframepage').contentWindow.document.getElementById(zid)
// parent: document.getElementById(zid)
});
}
</script>
子页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>安泽气体</title>
<meta name="description" content="安泽气体">
<meta name="keywords" content="安泽气体、气体">
<!-- start 公用样式 -->
<link rel="stylesheet" type="text/css" href="../css/second.css"/>
</head>
<body onload="parent.zhtest('zh21');parent.zhtest('zh22');parent.zhtest('zh23');parent.zhtest('zh24');">
<div class="yjgg">
<div class="yjgg_lis">
<div class="line_466"></div>
<ul class="xs_active_img" id="zh11">
<li id="zh21" onclick="parent.zhtest('zh21')">
<a target="_top">
<img src="data:images/dj2.jpg" class="across">
<img src="data:images/dj1.jpg" class="across" style="display: none;"/>
<img src="data:images/dj3.jpg" class="across" style="display: none;"/>
<span class="number">3张</span>
</a><p>电解室</p></li>
<li id="zh22" onclick="parent.zhtest('zh22')">
<a target="_top">
<img src="data:images/hy3.jpg" class="across"/>
<img src="data:images/hy2.jpg" class="across" style="display: none;"/>
<img src="data:images/hy1.jpg" class="across" style="display: none;"/>
<span class="number">3张</span>
</a><p>化验室</p></li>
<li id="zh23" onclick="parent.zhtest('zh23')">
<a target="_top">
<img src="data:images/cz1.jpg" class="across">
<img src="data:images/cz2.jpg" class="across" style="display: none;"/>
<img src="data:images/cz3.jpg" class="across" style="display: none;"/>
<span class="number">3张</span>
</a><p>充装间</p></li>
<li id="zh24" onclick="parent.zhtest('zh24')">
<a target="_top">
<img src="data:images/qt4.jpg" class="across">
<img src="data:images/qt1.jpg" class="across" style="display: none;"/>
<img src="data:images/qt2.jpg" class="across" style="display: none;"/>
<img src="data:images/qt3.jpg" class="across" style="display: none;"/>
<span class="number">4张</span>
</a>
<p>其它</p></li>
</ul>
<div class="line_466"></div>
<div class="print">
<ul>
<li class="fh"><a href="../index.html" target="_top">返回</a></li>
<li class="dy"><a href="javascript:window.print()">打印页面</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
关于获取多个id的用法的更多相关文章
- Jquery如何获取控件ID
l 1.#id 用法: $(”#myDiv”); 返回值 单个元素的组成的集合 说明: 这个就是直接选择html中的id=”myDiv” l 2.Element 用法: ...
- 小程序 js中获取时间new date()的用法(网络复制过来自用)
js中获取时间new date()的用法 获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获 ...
- jquery教程-Jquery 获取标签个数 size()函数用法
jquery教程-Jquery 获取标签个数 size()函数用法,size() 方法返回被 jQuery 选择器匹配的元素的数量. 语法 $(selector).size() jQuery ...
- Appium+python自动化(二十五)- 那些让人抓耳挠腮、揪头发和掉头发的事 - 获取控件ID(超详解)
简介 在前边的第二十二篇文章里,已经分享了通过获取控件的坐标点来获取点击事件的所需要的点击位置,那么还有没有其他方法来获取控件点击事件所需要的点击位置呢?答案是:Yes!因为在不同的大小屏幕的手机上获 ...
- Js中获取时间 new date()的用法
Js中获取时间 new date()的用法 获取时间: var myDate = new Date();//获取系统当前时间 myDate.getYear(); //获取当前年份(2位) myDate ...
- thinkphp-无限分类下根据任意部门获取顶级部门ID
根据所得到的部门编号获取顶级部门ID: 参数 - department_id 表格组织架构: tab_departments department_id parent_id name 1 1 顶级 2 ...
- php递归获取顶级父类id
php递归获取顶级父类id function get_top_parentid($id){ $r = M('navclass')->where('id = '.$id)->field('i ...
- asp.net js获取控件ID
ClientID是由ASP.Net生成的服务器控件得客户端标识符,当这个控件生成到客户端页面的时候,在客户端代码访问该控件时就需要通过ClientID来访问. 以文本框为例: 一.未使用母版页 js可 ...
- MYSQL获取自增ID的四种方法
MYSQL获取自增ID的四种方法 1. select max(id) from tablename 2.SELECT LAST_INSERT_ID() 函数 LAST_INSERT_ID 是与tabl ...
随机推荐
- C++ template —— 模板中的名称(三)
第9章 模板中的名称------------------------------------------------------------------------------------------ ...
- java十年技术栈[总结复习用]
以下摘自http://www.tvtv223.com/so/8/default/8.html#36-数据库的分库分表mycat java技术栈 参考了众多资料,这里就不再详细列举了,可以自行去搜索 1 ...
- 使用API函数EnumWindows()枚举顶层窗口
http://simpleease.blog.163.com/blog/static/1596085820052770290/ 要枚举Windows当前所有打开的顶层窗口,可使用Windows A ...
- 【转载】.NET 开发者必备的工具箱
本文作者Spencer是一名专注于ASP.NET和C#的程序员,他列举了平时工作.在家所使用的大部分开发工具,其中大部分工具都是集中于开发,当然也有一些其它用途的,比如图片处理.文件压缩等. 如果你是 ...
- 【框架学习】Nancy 框架
Nancy 框架 http://liulixiang1988.github.io/nancy-webkuang-jia.html .是一个轻量级用于构建http相应的web框架: .与mvc类似,有自 ...
- sea.js常用接口
seajs.config 用来对 Sea.js 进行配置. seajs.config({ // 指定需要使用的插件 plugins: ['text', 'shim'], // 设置别名,方便调用 al ...
- win10下网狐荣耀手机端android app编译
基于荣耀版(2017.5.21)12 款游戏..7z这款游戏,网上有下载的 1.解压后进入 cd shoujiduan 2.将client/base复制到client/ciphercode/下,也就是 ...
- SpringMVC温故知新
1. SpringMVC流程简记 (1) 用户发送请求至前端控制器DispatcherServlet (2) DispatcherServlet收到请求调用HandlerMapping处理器映射器 ( ...
- sencha touch 开发环境搭建(视频)
图文文章参见: http://www.cnblogs.com/mlzs/p/3420900.html 视频共享链接 百度:http://pan.baidu.com/s/1mg5DpS8
- apache两种工作模式详解
prefork模式 这个多路处理模块(MPM)实现了一个非线程型的.预派生的web服务器,它的工作方式类似于Apache 1.3.它适合于没有线程安全库,需要避免线程兼容性问题的系统.它是要求将每个请 ...