【问题标题】:Can I put a link inside a title attribute?我可以在标题属性中放置一个链接吗?
【发布时间】:2009-07-09 03:28:23
【问题描述】:

我正在使用jQuery Fancybox plugin 创建一个模式窗口,其中链接的href 作为内容,title 作为其标题。我希望能够在标题中有一个可点击的链接(在这种情况下会导致更大的地图),但我不能将<a> 标记放入title 属性中。我该如何通过 Javascript、jQuery 或其他方法放入此链接?

<a class='iframe' href='http://maps.google.com/maps?q=%235+Health+Department+Drive,+Troy,+MO+63379&amp;ll=38.979228,-90.97847&amp;z=13&amp;iwloc=near&amp;num=1&amp;output=embed' title='Google Map to Lincoln County Health Department'>Map to LCHD</a>

【问题讨论】:

    标签: javascript jquery html fancybox


    【解决方案1】:

    我不熟悉这个插件,但我想到了这个方法。

    您可以将内容元素隐藏在锚点中并修改您的插件以使用您介绍的元素。例如:

    <a class='iframe' 
       href='http://maps.google.com/blahlblahlbah' 
       title='Google Map to Lincoln County Health Department'>Map to LCHD
       <span class="title-href" style="display: none">http://zebrakick.com</span>
    </a>
    

    希望对您有所帮助。

    【讨论】:

      【解决方案2】:

      将 element => destination_link 映射保留为对象,并从中获取值以进行重定向。

      var linkmap = {
         lincoln:   '/location/3/',
         someplace: '/location/99'
      }
      

      现在您可以在单击事件中使用链接映射中的值(使用 [] 或 . 运算符)

      【讨论】:

        【解决方案3】:

        我传递了额外的数据:

        <a href="images/product.jpg" title="Product nummer 1" data-title-url="http://google.nl" rel="fancybox">
        

        并使用自定义回调来设置标题:

        {
            //fancybox options array
            titleFormat: function(title, currentArray, currentIndex, currentOpts){
                var currentElement = currentArray[currentIndex];
        
                var html = "<h1>" + title + "</h1>";
                var titleUrl = $(currentElement).data("title-url");
                if (titleUrl) {
                    var link = $("<a>", {href: titleUrl, text: titleUrl, target: "_blank"});
                    html += " (" + link.prop("outerHTML") + ")";
                }
        
                return html;
            },
        }
        

        http://fancybox.net/api

        http://api.jquery.com/data/

        【讨论】:

          猜你喜欢
          • 2010-10-11
          • 1970-01-01
          • 2017-02-24
          • 1970-01-01
          • 2018-10-29
          • 2020-01-19
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多