我正在使用PopBox放大页面上的缩略图。
但我希望我的网站即使对于已关闭javascript的用户也能正常工作。

我尝试使用以下HTML代码：

<a href="image.jpg">
     <img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/>
</a>

现在，我需要使用javascript禁用a-Tag，否则我的PopBox无法正常工作。

我怎么做？

解决方案

回答

将onclick事件放在链接本身上，如果不想执行默认行为(遵循链接)，则从处理程序中返回false。

回答

只需将onclick放在a标签上即可：

<a href="image.jpg onclick="Pop()"; return false;"><img ...></a>

确保在函数末尾(在此处为Pop)或者在上面示例中的内联函数中返回false。这样可以防止用户通过<a>的默认行为将其重定向到链接。

回答

我们可以为所有后备锚标记指定一个特定的类名，例如"简单"

使用原型，我们可以通过CSS选择器使用该类来获取所有标签的数组。

var anchors=$$('a.simple')

现在我们可以遍历该数组并清除href属性，或者安装onclick处理程序以覆盖常规行为，等等。

(经过编辑后，上面列出的其他方法要简单得多，这只是来自做很多不引人注意的javascript的背景，JS会加入进来，并在功能上增强HTML页面并增加额外的内容！)

回答

锚点(<a>标签)不需要href`属性，因此摆脱掉它...

<a id="apic001" href="pic001.png"><img src="tn_pic001.png"></a>

   <script type="text/javascript">
      document.getElementById("apic001").removeAttribute("href");
   </script>

该方法将避免库争用onclick。

在IE6 / FF3 / Chrome中测试。附带好处：我们可以使用ID作为URI片段直接链接到包含该缩略图的页面部分：http：// whatever / gallery.html＃apic001。

为了获得最大的浏览器兼容性，请在标记中的锚标记中添加一个"名称=" apic001"`属性("名称"和" id"值必须相同)。

使用jQuery，dojo，Prototype等，我们应该可以在多个相似的锚点上执行removeAttribute，而无需使用id。

回答

我们应该能够将Chris的想法中的return false与我们自己的代码混合并匹配：

<a href="image.jpg" onclick="return false;">
    <img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);">
</a>

如果某人禁用了Javascript，则其浏览器将忽略这两个元素中的onclick语句并遵循链接；如果他们启用了Javascript，那么他们的浏览器会同时遵循这两个OnClick语句-第一个告诉他们不要遵循<a>链接。 ^ _ ^

回答

我可以建议最好的解决方案吗？这是使用jQuery 1.4+。

在这里，我们有一个存放所有照片的容器。注意添加的类。

<div id="photo-container">
    <a href="image1.jpg">
        <img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" />
    </a>
    <a href="image2.jpg">
        <img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" />
    </a>
    <a href="image3.jpg">
        <img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/>
    </a>
</div>

然后，我们可以通过以下方式制作单个事件处理程序：

<script type="text/javascript">
$(document).ready(function(){
    var container = $('#photo-container');

    // let's bind our event handler
    container.bind('click', function(event){
        // thus we find (if any) the image the user has clicked on
        var target = $(event.target).closest('img.popup-image');

        // If the user has not hit any image, we do not handle the click
        if (!target.length) return;

        event.preventDefault(); // instead of return false;

        // And here you can do what you want to your image
        // which you can get from target
        Pop(target.get(0));
    });
});
</script>