zoukankan      html  css  js  c++  java
  • 关于获取多个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="images/dm1.jpg" class="across"/>
                             <img src="images/dm2.jpg" class="across" style="display: none;" />
                         </a>
                     </li>
                     <li id="zh12" onclick="zhtest('zh12')">
                         <a target="_top">
                         <img src="images/cq1.jpg" class="across"/>
                         <img src="images/cq2.jpg" class="across" style="display: none;"/>
                         <img src="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="images/dj2.jpg" class="across">
                         <img src="images/dj1.jpg" class="across" style="display: none;"/>
                         <img src="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="images/hy3.jpg" class="across"/>
                         <img src="images/hy2.jpg" class="across" style="display: none;"/>
                         <img src="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="images/cz1.jpg" class="across">
                         <img src="images/cz2.jpg" class="across" style="display: none;"/>
                         <img src="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="images/qt4.jpg" class="across">
                             <img src="images/qt1.jpg" class="across" style="display: none;"/>
                             <img src="images/qt2.jpg" class="across" style="display: none;"/>
                             <img src="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>

  • 相关阅读:
    [置顶] duilib优化
    cocos2dx 0.9.2 ccmenu bug
    wince 本地播放器界面
    关于变更设计
    MS SQL系统存储过程览要
    [翻译]IE8下VML的变化
    VS 2010 快捷操作
    .Net Web程序设计——通用的设计元素
    如何高效的清理系统盘空间?
    如何进行SQL性能优化?-借助Profile
  • 原文地址:https://www.cnblogs.com/zhouyx/p/4211394.html
Copyright © 2011-2022 走看看