由于我在使整个DIV可点击的上下文中使用data-href =“”,因此我收到一个验证错误。 JS和HTML如下。我该怎么做才能使这个W3C合规?
JQUERY
$(function(){
$(".linked").click(function(){
window.location = $(this).attr("data-href");
return false;
});
});
HTML
<div class="" data-href="link.html"></div>
答案 0 :(得分:7)
如果可能,您应该考虑使用支持data-*
属性的doctype。对于HTML5,那是:
<!DOCTYPE html>
答案 1 :(得分:2)
由于data-*
是HTML5
规范的一部分,因此您需要使用html5-doctype:
<!DOCTYPE html>
任何其他doctype都会根据HTML4或XMHTML规则解析您的网站,其中data-*
属性无效。
编辑:
你应该始终使用正确的doctype启动你的html。由于<!DOCTYPE html>
在所有浏览器中触发标准模式,这是“唯一正确的方式”,除非您真的想要XHTML(尽管我看不出您应该这样做的原因)。
EDIT2:
您可能需要考虑使用a
锚标记,因为它已经有一个href并且被认为是可点击的?
答案 2 :(得分:1)
data - 属性是HTML5规范的一部分,因此如果您的文档没有HTML5 Doctype,验证程序将产生错误。
与此同时,将这些属性与HTML4文档类型一起使用没有问题,浏览器将无法使用它,您将能够使用它们 - 页面将无法验证W3C验证器。< / p>
答案 3 :(得分:-1)
你通过jQuery添加属性很酷吗?或者我们需要更动态的解决方案吗?
$(".linked").attr('data-href', 'link.html').click(function(){
window.location = $(this).attr("data-href");
return false;
});
也:
考虑到不是符合WC3标准的方法,您是否考虑过将其移入Title属性?删除'.html'line,并在您的点击功能中:
HTML:
<div class="" title="link"></div>
的jQuery
$(".linked").click(function(){
var dataHref = $(this).attr('title');
window.location = dataHref.html;
return false;
});
然后,我们再次遇到传播问题。我不知道您的链接是如何传播的,无论您是硬编码还是使用服务器端脚本动态创建它们,因此后者和以前的解决方案对您来说仍然不够好。
我被低估了,因为OP说提供的解决方案不起作用 - 所提供的解决方案完全正常。请参阅下面的小提琴,并确保您在向某人投票之前没有错误。