首页 > 代码库 > 关于获取多个id的用法

关于获取多个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="http://www.mamicode.com/css/second.css"/>
</head>
<script src="http://www.mamicode.com/layer/jquery.js"></script>
<script src="http://www.mamicode.com/layer/layer.min.js"></script>
<script src="http://www.mamicode.com/layer/extend/layer.ext.js"></script>
<script>
function zhtest(zid){
    layer.photosPage({
            parent: document.getElementById(zid)
        });  
}
</script>

注释:1.zid为虚拟变量可以传递任何id

        2.括号内不加引号表示变量表示一类,加引号是字符串表示一种固定值。


<body onl oad="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="http://www.mamicode.com/images/dm1.jpg" class="across"/>
                         <img src="http://www.mamicode.com/images/dm2.jpg" class="across" style="display: none;" />
                     </a>
                 </li>
                 <li id="zh12" onclick="zhtest(‘zh12‘)">
                     <a target="_top">
                     <img src="http://www.mamicode.com/images/cq1.jpg" class="across"/>
                     <img src="http://www.mamicode.com/images/cq2.jpg" class="across" style="display: none;"/>
                     <img src="http://www.mamicode.com/images/cq3.jpg" class="across" style="display: none;"/>
                   </a>
                 </li>
                </ul>
             </div>
   
         </div>
</body>
</html>

二.iframe框架页面中的写法

主页面

<script src="http://www.mamicode.com/layer/jquery.js"></script>
<script src="http://www.mamicode.com/layer/layer.min.js"></script>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/css/second.css"/>
</head>
<body onl oad="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="http://www.mamicode.com/images/dj2.jpg" class="across">
                     <img src="http://www.mamicode.com/images/dj1.jpg" class="across" style="display: none;"/>
                     <img src="http://www.mamicode.com/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="http://www.mamicode.com/images/hy3.jpg" class="across"/>
                     <img src="http://www.mamicode.com/images/hy2.jpg" class="across" style="display: none;"/>
                     <img src="http://www.mamicode.com/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="http://www.mamicode.com/images/cz1.jpg" class="across">
                     <img src="http://www.mamicode.com/images/cz2.jpg" class="across" style="display: none;"/>
                     <img src="http://www.mamicode.com/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="http://www.mamicode.com/images/qt4.jpg" class="across">
                         <img src="http://www.mamicode.com/images/qt1.jpg" class="across" style="display: none;"/>
                         <img src="http://www.mamicode.com/images/qt2.jpg" class="across" style="display: none;"/>
                         <img src="http://www.mamicode.com/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="http://www.mamicode.com/index.html" target="_top">返回</a></li>
          
                          <li class="dy"><a href="javascript:window.print()">打印页面</a></li>
                       </ul>
                      </div>
             </div>
              
         </div>    

</body>
</html>

关于获取多个id的用法