使用id引用超链接

       今天在做网站页面的时候发现,在超链接中也可以使用id来引用,例如用在这样的场合:

       在一些电子商务网站的产品页面的图片会有一个链接,用于在新页面查看产品的图片,html代码:

       <!--  开新窗口浏览大图  -->
                                <div  class="viewFull">
                                    <img src="$content.getURI('images/show-room/zoom_in.gif')"/>
                                    <a id="bigImgC" href="$ImageList1.get(0).getImageUrl_big()" target="_blank">
                                        View Large Image
                                    </a>
                                 </div>
       <!--  新窗口浏览大图结束  -->

       这样,可看到<a>链接的id为bigImgC,在js方法中可以动态给bigImgC的链接地址赋值,js代码:

       function change1(url,index,obj){    //onmouse at the product image event
                var objA = document.getElementById('bigImgA');
                var objS = document.getElementById('bigImg');
                var objC = document.getElementById('bigImgC');
                objS.src = url;
                objA.href = bigImg1[index];
                objC.href = bigImg1[index];
                if(parentIdStr != ""){
                    document.getElementById(parentIdStr).className = '';
                    obj.parentNode.className = "active";
                }else{
                    obj.parentNode.className = "active";
                }
                parentIdStr = obj.parentNode.id;
            }

        change1()方法在用户鼠标放在产品大图片下的的不同小图片时触发,当用户鼠标放在小图片上时,大图片的区域将显示相应的大产品图片,并且objC处的<href>的值将会变化,会赋与同产品大图片相同的url。

       产品大图下的小图片代码:

      #foreach($imgVo in $ImageList1)
               <li id="$imgVo.getProductImageId()" #if($index1==0)class="active"#end>
               <img src="$imgVo.getImageUrl_little()" width="40" height="40" οnmοuseοver="change1(mediumImg1[$index1],$index1,this)" />
               </li>
       可见,html的操作内容还是可以挖掘出不少东东的@

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值