Question

我正在使用Wordpress灯箱插件，“title”属性指定灯箱内的说明。这就是我使用的插件示例如下：

<a href="link.to.video" class="wplightbox" title="The description video">Video</a>

是否可以在上述代码中的title属性中包含一个按钮作为链接？这可能在HTML中吗？

Answer 1

在title属性中除了text之外不能放任何东西：

title属性表示元素的建议信息，例如适用于工具提示的信息。在链接上，这可以是目标资源的标题或描述;在图像上，它可以是图像信用或图像的描述;关于一个段落，它可以是对案文的脚注或评注;在引用中，它可能是关于来源的进一步信息;等等。值是文本。

来源：https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-title-attribute

你需要查看你的WP插件的选项，找到一种方法来做你需要的，或者如果插件没有提供这样的选项，可以用另一个选项进行更改。

稍后编辑：经过快速搜索后，似乎没有WP的灯箱插件可以显示一些HTML代码作为描述。

如果是这种情况，则需要一些自定义代码。我会用这个程序：

使用链接作为标题，例如：http://example.com/page
（这应该是js插件中的一个事件），使用js / jQuery
<将任何以 http：// 开头的标题转换为按钮/ LI>

以下是jQuery的代码：

＆＃13;

/**
* This code should be run after the lightbox is displayed
*/

//get the titles from the lightbox / lightboxes - use the appropriate selector
var titleTag = $('.title');

//go over all the titles selected and replace the URLs with <a> tags
titleTag.each(function(){
  url = findRegex($(this).text());
  if ( url !== false ) {
    $(this).html('<a href="' + url + '" class="button">Button</a>');
  }
});

//function to find an URL in a string 
//returns false if no URL in the string 
function findRegex( str ) {
  var regex = /^(https?:\/\/)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*\/?$/g;
  let m;
  var found = false;
  while ((m = regex.exec(str)) !== null) {
      // This is necessary to avoid infinite loops with zero-width matches
      if (m.index === regex.lastIndex) {
          regex.lastIndex++;
      }

      found = m[0];
  }
  
  return found;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="title">http://example.com/page</div>

<div class="title">Normal title</div>

＆＃13;

在标题属性中添加按钮链接 - HTML

1 个答案: