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

Question

我正在做一些可访问性（ADA）的任务，团队要求我只在选项卡上设置一个可视指针，而不是点击。眼下

我可以看到淡蓝色的外框当我点击的锚，也当我标签他们。 我需要该轮廓才能在选项卡上显示。

有什么建议吗？

Answer 1

你只需要在click活动中删除的轮廓，并在focus事件设置轮廓。

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"); 
 
}));

.no-outline { 
 
    outline: 0; 
 
}

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

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>