如何仅在选项卡上设置元素的轮廓而不是单击？

Question

我正在为辅助功能（ADA）执行一些任务，团队要求我仅在选项卡上设置可视指针，而不是单击。

现在，当我点击锚点时以及当我选中它们时，我可能会看到浅蓝色轮廓。 我需要该大纲只出现在标签上。

有什么建议吗？

Answer 1

您只需删除click事件的大纲，并在focus事件上设置大纲。

＆＃13;

＆＃13;

var elements = Array.from(document.querySelectorAll("a"));

elements.forEach(a => a.addEventListener("click", function() {
  a.classList.add("no-outline");
}));

elements.forEach(a => a.addEventListener("focus", function() {
  a.classList.remove("no-outline");
}));

＆＃13;

.no-outline {
  outline: 0;
}

＆＃13;

Some text. <a href="#">This is link</a>.
Also we have <a href="#">another link</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

因此，这将处理点击或tabkey事件。它们的显示方式不同，但两者都调用相同的功能。希望它有所帮助！

/*********
 * function that simply toggles the pane.
 *  doesn't care what calls it, simply that
 *  it gets the proper data. We can call it
 *  in the click handler (as in the HTML) or
 *  in the keyup handler (as below).
 *  either has the same functionality, but
 *  can have their own processing.
 *********/
openCity = function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

/********
 * Handler for the tab key functionality.
 *  Processes separately from the click
 *  function, as is shown by the different
 *  coloring. However, either click or tab
 *  key can trigger the same tab display
 *  function.
 *********/

var tabIndex;
var tabEls = $(".tab button");
$(document).ready(function() {
  $(document).on("keyup", function(evt) {
    // Prevent the tab key from propagating
    evt.preventDefault();
    evt.stopPropagation();

    // tab has been pressed
    if (evt.which == 9) {
      // Currently, no tab has been chosen, so we select the first
      if ($(".tabbedActive").length == 0) {
        tabEls.eq(0).addClass("tabbedActive");
      } else {
        // we have a selected tab. So we either choose the next, or
        //  the first if we need to rotate through.
        tabIndex = tabEls.parent().find('.tabbedActive').index();

        // Remove the class from all tab els
        tabEls.removeClass('tabbedActive');
        if (tabIndex == tabEls.length - 1) {
          tabEls.eq(0).addClass("tabbedActive");
        } else {
          tabEls.eq(tabIndex + 1).addClass("tabbedActive");
        }
      }
      
      // Now that we have a selected tab, use that to toggle the pane
      openCity(evt, tabEls.parent().find('.tabbedActive').text() )

    }
  })
});

a
/* Style the tab */

div.tab {
  overflow: hidden;
  border: 1px solid #ccc;
}


/* Style the buttons inside the tab */

div.tab button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */

div.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

div.tab button.active {
  background-color: #ccc;
}

.tabbedActive {
  border: 1px solid yellow;
  background-color: #cc0;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>