问题:
我在页面底部有一个返回顶部箭头.fa-caret-up
,希望在单击箭头到窗口或 Logo 后更改焦点 .logo
位于页面左上角。
我在哪里
我看到它 console.log("这有效吗?")
但当我按 Tab 键时,它不符合正常的 Tab 键顺序,它会将我带到 Mac 屏幕阅读器中的“保留 HTML 内容” .
脚本.js
$(function() {
// This plays videos on click, so beautiful
$("video").click(function (e) {
if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
{
if(this.paused)
this.play();
else
this.pause();
}
});
// Smooth scroll like butter
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
// FOR IMAGES
// Needs fixing but on the right track
// var fadeImg = $("img").fadeTo(0, 0);
// $(window).scroll(function() {
// fadeImg.each(function(i) {
// a = $(this).offset().top + $(this).height();
// b = $(window).scrollTop() + $(window).height();
// if (a < b) $(this).fadeTo(500,1);
// });
// });
// Accessibility consideration, change focus from nav to header in story on click
$('.chp1').click(function (evt){
$("#1").focus();
evt.preventDefault();
});
$('.chp2').click(function (evt){
$("#2").focus();
evt.preventDefault();
});
$('.chp3').click(function (evt){
$("#3").focus();
evt.preventDefault();
});
$('.chp4').click(function (evt){
$("#4").focus();
evt.preventDefault();
});
$('.chp5').click(function (evt){
$("#5").focus();
evt.preventDefault();
});
$('.fa-caret-up').click(function (){
$('.logo').focus();
console.log("Does this work?");
});
// If mouse hovers over "Reading section", change two elements to yellow
$('.reading').mouseover(function(){
$('.fa-clock-o').addClass('yellow');
$('.min').addClass('yellow');
});
// If mouseout, then change back to default colour
$('.reading').mouseout(function(){
$('.fa-clock-o').removeClass('yellow');
$('.min').removeClass('yellow');
});
// If mouse hovers over "Listen section", change two elements to yellow
$('.listen').mouseover(function(){
$('.fa-headphones').addClass('yellow');
$('.lis').addClass('yellow');
});
// If mouseout, then change back to default colour
$('.listen').mouseout(function(){
$('.fa-headphones').removeClass('yellow');
$('.lis').removeClass('yellow');
});
});
index.html
<nav>
<div class="navGroup">
<a href="http://brandonsun.com" target="_blank"><img src="assets/img/branding/sq.png" alt="Brandon Sun logo. Click this image to go to the main site." class="logo"></a>
<p class="featureTitle" tabindex="0" role="heading">Asbestos</p>
<ul>
<a href="#1" tabindex="0" class="chp1"><span class="acc">Chapter 1: Name of Chapter.</span><li>1</li></a>
<a href="#2" tabindex="0" class="chp2"><span class="acc">Chapter 2: Name of Chapter.</span><li>2</li></a>
<a href="#3" tabindex="0" class="chp3"><span class="acc">Chapter 3: Name of Chapter.</span><li>3</li></a>
<a href="#4" tabindex="0" class="chp4"><span class="acc">Chapter 4: Name of Chapter.</span><li>4</li></a>
<a href="#5" tabindex="0" class="chp5"><span class="acc">Chapter 5: Name of Chapter.</span><li>5</li></a>
</ul>
</div><!-- /.navGroup -->
</nav>
<footer>
<div class="thanks">
<p class="credits" tabindex="0">
Photographer: <span class="bold" alt="Bruce Bumstead">Bruce Bumstead</span><br>
Reporter: <span class="bold" alt="Matt Goerzen">Matt Goerzen</span><br>
Developer: <span class="bold" alt="and Andrew Nguyen">Andrew Nguyen</span>
</p>
</div><!-- /.thanks -->
<a href="#" id="#" tabindex="0"><span class="acc">Go back to the top of the article</span><i class="fa fa-caret-up fa-2x" ></i></a>
</footer>
最佳答案
布兰登-布恩对问题的诊断是正确的,但是,我会更改解决方案以关注图像周围的 anchor ,因为这已经是自然可聚焦的,并且考虑到它可以与什么交互无论如何,你都会想要集中精力。
将代码更改为:
$('.fa-caret-up').click(function (){
$('.logo').parent().focus();
console.log("Does this work?");
});
关于javascript - 单击时将焦点更改为元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29547118/