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」タグを正常に動作させる必要があります。

2番目のリンクが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タグ内にhrefattrを含むdivから変更しました。それは違法ですか？

私はその問題に対する解決策を見つけました。

                $("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要素もネストできません。

その場合、ブラウザはそれらをネストされたものとしてレンダリングしません。2つの異なるリンクとして以下を作成するだけです（証明/画像を参照）。

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

証明： http： //jsfiddle.net/H44jE/ [検査をクリックしてリンクをクリック]

また、構成はブラウザによって異なって見えました。

ここに画像の説明を入力してください

注：何を試しているのかわかりませんが、flecが述べたように、他のオプションを探す必要があります。

@セイヤーいいえ、あなたはしません。PreventDefaultを使用しているため、クリックイベントを任意のhtmlタグに添付できます

于 2012-10-15T22:06:32.930 に答える
1

それらを1つのリンクとして保持し、シングルクリックハンドラーですべての処理を実行するのはどうですか？

そうすれば、有効なHTMLの2つの世界の最良のものを手に入れ、目的を達成することができます。たとえば（問題の私の理解に基づく）：

<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 に答える