0

我有 1 个链接围绕着另一个这样的链接：

<a href="#" class="video-link">
  <a href="#" class="not-video-link">link</a>
</a>

使用 jQuery，我找到了一个可以将表格转换为 iframe 的函数，如下所示：

$(".video-link").live("click", function (e) {
    e.preventDefault();
    // Capture the link's HREF attribute in a variable. 
    var youtubeLink = $(this).attr('href');
    var youtubeDiv = $(this).attr('id');

    // Set the HTML (the content) of the "video destination div" 
    // to = your iframe, including the youtubeLink
    // that the user original saved into this node.

    $('#' + youtubeDiv + '').html('<iframe style="margin-left:-12px; margin-right:-12px;" frameborder="0" height="234" src="' + youtubeLink + '&autoplay=1" title="YouTube video player" width="418"></iframe>');
});

它工作正常，但我需要让另一个“a”标签正常工作。

第二个链接有class="not-video-link"，我希望它可以正常打开链接。

这是整个盒子：

        echo '<br />
        <div id="the-video-destination-div'.$id.'"  class="video-link" href="'.youtubelink(tolink($youtubevid)).'">
        <table style="background-color:#EDEFF4; font-size:11px; border:1px solid #ccc;">
        <tr><td><a ><img style="cursor:pointer;" align="left" src="'.$video_thumbnail.'" width="152px" height="114px" /></a></td>
        <td style="vertical-align:top; width:199px; padding:5px; cursor:default; " ><font style="color: #3B5998; text-decoration:none; font-weight: bold;"><font class="youtube-title"><a id="not-video-link" style="cursor:pointer;" href1="http://www.youtube.com/watch?v='.youtubetitle($wallrow["youtubevid"]).'" target="_blank">'.$video_title.'</a></font></font><font class="link-host"><br /><a href="http://www.youtube.com">www.youtube.com</a><br /><br />'.substr($video_description,0,149).'...</font></td></tr>
        </table></div><br />';

我现在已经从 div 更改为 div 标签内的 href attr 。那是非法的吗？

我找到了解决问题的方法。

                $("a#not-video-link").click(function () {
                var youtubeLink1 = $(this).attr('href1');
                      window.open(youtubeLink1);
                      event.stopImmediatePropagation();

                    });

            $(".video-link").live("click", function(e) {
                    e.preventDefault();


                  // Capture the link's HREF attribute in a variable.
                  var youtubeLink = $(this).attr('href');
                  var youtubeDiv = $(this).attr('id');

                  // Set the HTML (the content) of the "video destination div" to = your iframe, including the youtubeLink that the user original saved into this node.
                  $('#' + youtubeDiv + '').html('<iframe style="margin-left:-12px; margin-right:-12px;" frameborder="0" height="234" src="' + youtubeLink + '&autoplay=1" title="YouTube video player" width="418"></iframe>');
                });

这会使链接停止另一个链接以启动，反之亦然。

4

2 回答 2

2

嵌套链接是不允许的，只是被认为是无效的结构。

http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

12.2.2 嵌套链接是非法的

A 元素定义的链接和锚点不得嵌套；A 元素不得包含任何其他 A 元素。

由于 DTD 将 LINK 元素定义为空，因此 LINK 元素也不能嵌套。

既然是这种情况，浏览器不会将它们呈现为嵌套的。它只会在下面创建两个不同的链接（见证明/图片）。

<a href="#" class="video-link">
  <a href="#" class="not-video-link">link</a>
</a>

证明： http: //jsfiddle.net/H44jE/ [点击检查并点击链接]

此外，该结构在不同的浏览器上看起来也不同..

在此处输入图像描述

注意：我不确定你在尝试什么.. 但正如 flec 提到的，你应该寻找其他选择..

@Thayer 不，你没有。由于您使用的是 preventDefault 您可以将点击事件附加到任何 html-tag

于 2012-10-15T22:06:32.930 回答
1

如何将它们保持为一个链接并在单击处理程序上进行所有处理？

这样，您将拥有两个世界中最好的一个有效的 HTML 并实现您想要的。例如（基于我对问题的理解）：

<a href="#" class="video-link" data-otherHref="#">
  link
</a>

并使用 jquery：

$(".video-link").live("click", function (e) {
    e.preventDefault();

    // Capture the link's HREF attribute in a variable. 
    var youtubeLink = $(this).attr('href');
    var youtubeDiv = $(this).attr('id');

    // Set the HTML (the content) of the "video destination div" 
    // to = your iframe, including the youtubeLink
    // that the user original saved into this node.

    $('#' + youtubeDiv + '').html('<iframe style="margin-left:-12px; margin-right:-12px;" frameborder="0" height="234" src="' + youtubeLink + '&autoplay=1" title="YouTube video player" width="418"></iframe>');

    // Here do whatever you want for the second link 
    var otherLink = $(this).data('otherHref');
});
于 2012-10-15T22:00:49.190 回答