我正在使用一个来自 W3C 的脚本 https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/tabs/tabs-1/tabs.html创建可访问的选项卡面板。当我使用脚本加载页面时,出现错误Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
对于一个变量tablist
其定义如下:
var tablist = document.querySelectorAll('[role="tablist]')[0];
var tabs, panels;
var delay = determineDelay();
错误所指的代码:
// Determine delay
function determineDelay () {
var hasDelay = tablist.hasAttribute('data-delay');
var delay = 0;
if (hasDelay) {
var delayValue = tablist.getAttribute('data-delay');
if (delayValue) {
delay = delayValue
} else {
delay = 300;
}
}
return delay;
}
和 HTMLtablist
应该抓住的是:
<div role="tablist" aria-label="Options">
<button role="tab" aria-selected="true" aria-controls="general-tab" id="general-btn">General</button>
<button role="tab" aria-selected="false" aria-controls="social-tab" id="social-btn" tabindex="-1">Social Networks</button>
</div>
这是通过 WordPress 插件加载的,该插件排队如下:
wp_enqueue_script( 'enhap-admin-script', plugins_url( '../_js/enhap.js', __FILE__ ), array(), false, true );
我看不出剧本有什么问题。我尝试手动输入var
在控制台中输入命令并得到相同的结果。