我的任务是制作与索尼网站上可以看到的类似的导航可访问性标签：http: //www.sony.co.uk/pro/hub/home
我感兴趣的一点是，例如，当您将鼠标悬停在“产品”上时，您会注意到菜单中的第一张图像周围有一条细虚线。从这里开始，如果您使用键盘上的 Tab 键，您就可以在菜单选项中使用 Tab。如果您随后将鼠标悬停在不同的主菜单项上，则虚线将出现在该菜单中的第一个图像上。
下面的代码是我尝试实现这种效果的尝试，这似乎与 Sony 的做法相似，因为我查看了他们的 jquery-main.js 文件，但是头脑不起作用。
这是我的代码（首先是标记）尝试做同样的事情。
<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 -->
jQuery
$('.main-navigation ul li.mmnu').click(function(){
var tabNum = $(this).index();
if (!allClosedSD())
{
animateToSizeSD(tabNum);
fadeInCurrentSD(tabNum);
// code below I though would focus on the first link in the menu
$('.SD-m1 div ul li:first a').focus();
console.log(tabNum);
console.log('enter activated');
}
else
{
if ($('.main-navigation ul li:eq(' + tabNum + ')').hasClass('hover'))
{
console.log('this one closes it');
closeMnuSD();
} else {
fadeInCurrentSD(tabNum);
animateToSizeSD(tabNum);
console.log('live swtich activated');
}
}
$('.main-navigation').addClass('open');
});
演示：http: //jsfiddle.net/8mnp8/
编辑：包括 animateToSizeSD() 代码。
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');
}
};