jQuery focus（）未生成虚线轮廓或未正确选择辅助功能
我的任务是制作类似的导航辅助功能选项卡，在这个索尼网站上可以看到： 我感兴趣的一点是，当你将鼠标悬停在“产品”上时，例如，你会注意到菜单中的第一个图像周围有一条细虚线。从这里，如果您使用键盘上的tab键，则可以通过菜单选项进行tab。如果将鼠标悬停在不同的主菜单项上，虚线将出现在该菜单中的第一个图像上 下面的代码是我试图实现这种效果的尝试，这似乎与索尼的做法类似，因为我查看了他们的jquery-main.js文件，但mind不起作用 下面是我的代码（首先是标记）来尝试执行同样的操作jQuery focus（）未生成虚线轮廓或未正确选择辅助功能,jquery,navigation,focus,Jquery,Navigation,Focus,我的任务是制作类似的导航辅助功能选项卡，在这个索尼网站上可以看到： 我感兴趣的一点是，当你将鼠标悬停在“产品”上时，例如，你会注意到菜单中的第一个图像周围有一条细虚线。从这里，如果您使用键盘上的tab键，则可以通过菜单选项进行tab。如果将鼠标悬停在不同的主菜单项上，虚线将出现在该菜单中的第一个图像上 下面的代码是我试图实现这种效果的尝试，这似乎与索尼的做法类似，因为我查看了他们的jquery-main.js文件，但mind不起作用 下面是我的代码（首先是标记）来尝试执行同样的操作 <di
<div class="main-navigation@(Request.QueryString.Get("breadcrumb") != "1" ? "" : " type-2")">
<ul class="cf">
<li class="mmnu"><a href="javascript:;">Products</a></li>
<li class="mmnu"><a href="javascript:;">Your Business</a></li>
<li class="mmnu"><a href="javascript:;">Where To Buy</a></li>
<li class="mmnu"><a href="javascript:;">Support</a> </li>
<li class="mmnu"><a href="javascript:;">Contact Us</a></li>
<li class="mmnu"><a href="javascript:;">Partners</a></li>
</ul>
<div class="expand-SD@(Request.QueryString.Get("breadcrumb") != "1" ? " type-2" : "")">
<div class="category-navigation-SD SD-m1"><!-- PRODUCTS -->
<div class="row-separator-SD cf">
<div class="col-1x4 frst">
<a href="#"><img width="50" height="24" width="50" height="24" src="assets/images/content/_0049_channel_partners.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Broadcast & Pro A/V</a></h2>
<ul>
<li><a id="ezone" onclick="s_objectID='topdropdown:Digital Signage';try{sc_navMethod('topdropdown');}catch(err){}" href="Iframe_Page?url=popup_my_subscriptions.cshtml&iW=921&iH=810" class="fancybox.iframe">New iframe</a></li>
<li><a href="">HD & SD Camcorders</a></li>
<li><a href="">Camera Systems</a></li>
<li><a href="">HD Decks, Recorders & VTRs</a></li>
<li><a href="">Professional Media</a></li>
<li><a href="">Production Switchers & Image Processing</a></li>
<li><a href="">Production Monitors</a></li>
<li><a href="">Professional Audio</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4">
<a href="#"><img width="50" height="24" src="assets/images/content/_0050_prime_support.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Broadcast Solutions</a></h2>
<ul>
<li><a href="">Outside Broadcast</a></li>
<li><a href="">News Aquisition & Production</a></li>
<li><a href="">Studios</a></li>
<li><a href="">Content Management & Distribution</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4">
<a href="#"><img width="50" height="24" src="assets/images/content/_0047_projector.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">4K Digital Cinema</a></h2>
<ul>
<li><a href="">4K Digital Cinema Projectors</a></li>
<li><a href="">High Frame Rate Software</a></li>
<li><a href="">Theatre Management Solutions</a></li>
<li><a href="">Entertainment Access Glasses</a></li>
<li><a href="">Accessories</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4 lst">
<a href="#"><img width="50" height="24" src="assets/images/content/_0048_sales_enquiries_2.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Video Security</a></h2>
<ul>
<li><a href="">Cameras</a></li>
<li><a href="">Recorders</a></li>
<li><a href="">Monitoring Software</a></li>
<li><a href="">Digital Encoders</a></li>
<li><a href="">Video Security Monitors</a></li>
<li><a href="">Accessories</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
</div><!-- ROW SEPARATOR END -->
<div class="row-separator-SD cf">
<div class="col-1x4 frst">
<a href="#"><img width="50" height="24" src="assets/images/content/_0024_medical.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Medical</a></h2>
<ul>
<li><a href="">3D Medical Products</a></li>
<li><a href="">Radiology Imagers</a></li>
<li><a href="">Printers</a></li>
<li><a href="">Print Media</a></li>
<li><a href="">Monitors</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4">
<a href="#"><img width="50" height="24" src="assets/images/content/_0025_video_conferencing.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Video Conferencing</a></h2>
<ul>
<li><a href="">tbc</a></li>
<li><a href="">tbc</a></li>
<li><a href="">tbc</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
<div class="col-1x4 lst">
<a href="#"><img width="50" height="24" src="assets/images/content/_0028_semi_conductors.svg" alt="Category Thumbnail" /></a>
<h2><a href="#">Semiconductors</a></h2>
<ul>
<li><a href="">Technical Library Login</a></li>
<li><a href="">Technical Library Registration</a></li>
</ul>
<a href="#" class="more">More ></a>
</div>
</div><!-- ROW SEPARATOR END -->
<div class="SD-nsh">
<a href="#" class="SD-cls"><img width="80" height="40" src="assets/images/content/menu_close.svg" alt="Menu close image" /></a>
</div>
</div><!-- PRODUCTS END -->
function animateToSizeSD(tabNum){
if (tabNum == "0" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[0]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(0)').addClass('hover');
} else if (tabNum == "0")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[0]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(0)').addClass('hover');
}
if (tabNum == "1" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[1]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(1)').addClass('hover');
} else if (tabNum == "1")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[1]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(1)').addClass('hover');
}
if (tabNum == "2" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[2]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(2)').addClass('hover');
} else if (tabNum == "2")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[2]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(2)').addClass('hover');
}
if (tabNum == "3" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[3]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(3)').addClass('hover');
} else if (tabNum == "3")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[3]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(3)').addClass('hover');
}
if (tabNum == "4" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[4]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(4)').addClass('hover');
} else if (tabNum == "4")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[4]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(4)').addClass('hover');
}
if (tabNum == "5" && !allClosedSD()) {
$('.expand-SD').show().animate({height:SDHarr[5]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(5)').addClass('hover');
} else if (tabNum == "5")
{
$('.expand-SD').delay(400).show().animate({height:SDHarr[5]},'slow');
$('.main-navigation ul li').removeClass('hover');
$('.main-navigation ul li:eq(5)').addClass('hover');
}
};
为了显示一些正确的格式，我将使用一个答案。我试图建议将焦点调用移动到动画函数，如下所示：
$('.expand-SD').show().animate({
height: SDHarr[0]
}, 'slow', function () {
$('.SD-m1 div ul li:first a').focus();
});
这样，焦点将在动画完成后执行 您的描述是在讨论悬停时的效果，但您的代码使用了单击处理程序。你想做什么，悬停还是点击？当你聚焦时你的动画完成了吗？否则，您可能希望将焦点部分放在动画中，以便在完成时聚焦。这里的示例：nnnnnn-我使用的是一个单击处理程序，但我不知道该部分完全相关，因为我只是尝试重新创建focus（）部分。耶罗尼莫-我认为它还没有完成，正如您在我使用animateToSizeSD（）运行动画的代码中看到的那样；之后不久，将其命名为“$（'.SD-m1 div ul li:first a'）.focus（）；”。这就是你的意思吗？当你点击一个锚时，通常会导致导航，这会影响焦点。您的单击处理程序不会调用
事件。preventDefault（）返回falsehref=“javascript:；”$('.expand-SD').show().animate({
height: SDHarr[0]
}, 'slow', function () {
$('.SD-m1 div ul li:first a').focus();
});