W3C 验证 - 此时元素 a 上不允许使用属性 buttonindex答案

【问题标题】：W3C Validation - Attribute buttonindex not allowed on element a at this pointW3C 验证 - 此时元素 a 上不允许使用属性 buttonindex
【发布时间】：2017-11-21 10:41:41
【问题描述】：

我收到错误“此时元素 a 上不允许使用属性按钮索引”。我的代码是

<p><a class="btn btn-success_ar hidden-xs" id="indexCarouselBeforeBtn2" buttonindex="2" role="button">HOVER HERE TO SEE BEFORE</a></p>

我的脚本是

<script type="text/javascript" >
var imageList = [];

$(document).ready(function(){

    var totalSlides = 5;
    for (var i = 1; i <= totalSlides; i++) {

        imageList[i] = [];

        imageList[i][0] = $('<img />').attr('src', 'after/images/external/index' + i + 'after.jpg').attr('id', 'indexCarouselImg' + i);
        imageList[i][1] = $('<img />').attr('src', 'after/images/external/index' + i + 'before.jpg').attr('id', 'indexCarouselImg' + i);


        $("#indexCarouselBeforeBtn" + i).mouseenter(function(){

            $("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
            $("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][1]);
            $(this).addClass('btnHover');
        });

        $("#indexCarouselBeforeBtn" + i).mouseleave(function(){

            $("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
            $("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][0]);
            $(this).removeClass('btnHover');
        });

        $("#indexCarouselImg" + i).remove();
        $("#item" + i).append(imageList[i][0]);
    }
});

即使使用 P 和 Div 标签而不是 a 标签，错误仍然存在。我该如何解决这个问题。

【问题讨论】：

HTML5 中没有这样的属性。如果您需要它为某些脚本逻辑提供信息，请使用自定义数据属性。
我用 Java 脚本更新了我的问题
有什么用？搜索和替换是您自己应该具备的能力，对吧？
有一个<button> 元素用于按钮。默认情况下可以访问它，并且不需要像添加 role="button" 这样的特殊处理来表现得像一个按钮。不需要（ab）使用<a>、<div> 和其他元素。
要验证您的代码，请将您的自定义 buttonindex 属性替换为整个代码中的 data-buttonindex。 data-prefixed 属性始终被认为是有效的。

标签： javascript html validation w3c

【解决方案1】：

我认为 HTML 中不存在该属性。

你可以使用tabindex。

https://www.w3schools.com/tags/att_global_tabindex.asp

【讨论】：

在你的javascript中用“tabindex”替换所有“buttonindex”
Tabindex 属性用于键盘导航。如果按钮被索引用于其他目的，最好使用不同的属性，如果正式的“有效性”很重要，则使用 data- 前缀。