27、交互式、可访问性效果及媒体富交互应用实现

交互式、可访问性效果及媒体富交互应用实现

1. ARIA 实现可访问性标签页

1.1 标签页切换代码

当点击标签时，关联面板会显示，隐藏面板的 aria - hidden 属性设为 true ，显示面板的设为 false 。同时，自定义数据属性 data - current 会更新为新选中的标签。以下是实现代码：

// click on tab
function displayPage() {
  // hide old selection
  var current = this.parentNode.getAttribute("data - current");
  var oldpanel = document.getElementById("tabpage_" + current);
  document.getElementById("tabnav_" + current).setAttribute("style",
  "background - color: #fff");
  oldpanel.style.display = "none";
  oldpanel.setAttribute("aria - hidden", "true");
  // display new selection
  var ident = this.id.split("_")[1];
  this.setAttribute("style", "background - color: #ccf"