`
geeksun
  • 浏览: 965293 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用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" onmouseover="change1(mediumImg1[$index1],$index1,this)" />
               </li>
       可见,html的操作内容还是可以挖掘出不少东东的@

分享到:
评论

相关推荐

    Android开发之部分字符串可实现超链接点击事件的方法源码

    然后通过indexOf方法找到超链接在字符串中的位置,使用setSpan方法将ClickSpan应用到指定的文本范围。 另一种常见的方式是使用WebView,它可以直接显示HTML内容,包括超链接。例如: ```java WebView webView = ...

    NPOI创建docx超链接及书签

    提供的压缩包文件“HyperLinkBookMark”和“NPOI”很可能包含了示例代码或项目文件,你可以通过这些资源进一步学习和实践如何使用NPOI创建docx文档的超链接和书签。 总的来说,NPOI是一个强大且灵活的工具,可以...

    echarts 全国地图 点击地图上的点,打开超链接 地图点击事件

    在本文中,我们将深入探讨如何使用ECharts库创建一个全国地图,并实现点击地图上的特定区域后,触发页面跳转的功能。ECharts是一个基于JavaScript的数据可视化库,它提供了丰富的图表类型和交互功能,使得数据可视化...

    jQuery鼠标滑过超链接动画特效.zip

    然后,我们需要为要添加动画效果的超链接添加一个唯一的ID或类名,以便在jQuery中选择它们。例如: ```html 动画超链接 ``` 接下来,编写jQuery代码。在`&lt;script&gt;`标签中,使用$(document).ready()函数确保页面加载...

    在django模板中实现超链接配置

    总结一下,掌握在Django模板中使用`{% url %}`标签来配置超链接对于开发Django应用非常重要。它不仅简化了URL的管理,使得我们可以在模板中通过名称来引用URL,而且使得URL配置的更改不会影响到模板本身,提高了代码...

    Android开发实现TextView超链接5种方式源码实例

    如果你希望在XML布局中直接引用HTML字符串,可以在`strings.xml`中定义,并在TextView中直接使用。然后在Activity中设置`LinkMovementMethod.getInstance()`。例如: ```xml (strings.xml) &lt;string name="tv4"&gt;&lt;a...

    JS实现网页上随机产生超链接地址的方法

    `id`属性被设置为`linkID`,便于后续的引用。然后,我们将这个`&lt;a&gt;`标签和描述文本插入到文档中。最后,我们通过`linkID.href`输出已生成的超链接的实际地址,以供查看。 总结起来,通过JavaScript的Math.random()...

    HTML 使用浮动框架.doc

    这里,`name`属性用于设置框架的名称,方便通过名称引用;`src`属性指定要显示的网页文件路径;`width`和`height`分别设置框架的宽度和高度;`align`属性定义框架在页面中的对齐方式(左对齐、居中、右对齐);`...

    C++实现WebBrowser控件中获取鼠标点击事件和超链接

    WebBrowser控件的ID通常设为`IDC_WEBBROWSER`,以便后续代码中引用。 接着,为了加载指定的网页,我们需要在MFC的视图类中重写`OnCreate`方法,初始化WebBrowser控件,并调用`Navigate()`函数加载URL。例如: ```...

    JavaScript获取网页中第一个链接ID的方法

    在JavaScript部分,使用了document.links[0]来获取所有超链接中的第一个,并通过访问.id属性来取得这个链接的ID。最后,通过document.write()方法将获取到的ID值输出到页面上。这个过程展示了如何利用JavaScript在...

    markdown语法手册

    锚点创建需要将一个特定的ID定义在目标位置,然后在文档的其他位置使用链接到这个ID的超链接。 ### 列表 Markdown支持无序列表和有序列表。无序列表使用星号(*)、加号(+)或减号(-)作为列表标记,有序列表则使用数字...

    Android中使用TextView、EditText完成的新闻详情浏览的代码清单.pdf

    `tv_title`和`tv_content`分别对应新闻标题和内容,它们都引用了字符串资源`@string/title`和`@string/content`。`style="@style/title_style"`和`style="@style/content_style"`表明这两个`TextView`使用了预定义的...

    jquery 实现的简单画廊

    记得在项目中引入jQuery库(`&lt;script src="https://code.jquery.com/jquery-3.x.x.min.js"&gt;&lt;/script&gt;`),并确保所有资源文件(如`index.html`、`title.png`、`back.png`、`icons`、`images`目录)正确引用,这样...

    网站中文简体繁体切换JS代码包及使用列子

    A标签常用于创建超链接,但在这里,它被用作一个用户交互的按钮,而非实际导航到其他页面。 接着,你需要在网页的HTML代码中引入这个JS代码包。这通常通过`&lt;script&gt;`标签完成,将代码包的路径写在`src`属性中。一旦...

    条形码扫描、二维码生成扫描—ZXing

    gen目录则是自动生成的Java源代码,通常包含R.java文件,这个文件包含了应用所有资源的ID引用。 最后,proguard.cfg文件用于ProGuard优化,这是一个Java代码混淆工具,可以减小APK的大小并提高代码的安全性。在...

    Jsoup语法详解

    1. 使用传统的DOM方式:使用getElementById()和getElementsByTag()方法,可以根据节点名称或者id来获取对应的元素或者元素列表。 2. 使用选择器方式:使用select()方法,可以使用CSS选择器来选择HTML元素。 Jsoup的...

    JPivot标签使用详解 中文

    属性`id`和`queryName`用于标识查询,并在其他标签中引用。 5. **navigator**: - 提供导航功能,帮助用户在多维数据集中浏览和选择数据。 6. **print**: - 支持页面打印功能,允许用户将当前视图打印或导出。 ...

    CCS3 快捷查询表

    - ID选择器(ID Selectors):通过ID来指定样式,如#name。在HTML中,ID通过id属性表示。 - 元素选择器(Element Selectors):直接指定HTML元素标签,如h1、p、a等。 选择器还可以组合使用,以便提供更具体、更...

Global site tag (gtag.js) - Google Analytics