У меня есть вкладка, заголовки вкладок являются ссылками и имеют больше ссылок внутри тела.
Когда я нажимаю на заголовок первой вкладки, а затем нажимаю кнопку вкладки на клавиатуре, она должна go внутри ссылки по одному из этого конкретного тела вкладки. но в моем насыщении он пропускает дочерние ссылки и go к следующей родительской ссылке.
Как мы можем этого достичь?
Я знаю, что это возможно, как вы можете видеть Амазонка имеет сделали это на своем сайте см. раздел Просмотр разделов справки
$(document).ready(function() {
$("#category-section li a").mouseover(function() {
$('.csg-category a').each(function() {
$(this).removeClass('active');
});
$('.csg-category div.arrow').each(function() {
$(this).hide();
});
$(this).addClass('active');
$(this).siblings('div.arrow').show();
id = $(this).attr('rel');
$('.csg-hover-box-content').each(function() {
$(this).removeClass('active');
});
$(id).addClass('active');
});
$("#category-section li a").focus(function() {
$('.csg-category a').each(function() {
$(this).removeClass('active');
});
$('.csg-category div.arrow').each(function() {
$(this).hide();
});
$(this).addClass('active');
$(this).siblings('div.arrow').show();
id = $(this).attr('rel');
$('.csg-hover-box-content').each(function() {
$(this).removeClass('active');
});
$(id).addClass('active');
});
$(".csg-category a").focus(function(evt) {
});
$(".csg-category a").click(function(evt) {
evt.preventDefault();
$('.ul.category-list.a-nostyle.a-list-link a').focus();
});
$('.csg-category a').css('cursor', 'default');
});
.csg-inner,
.ss-landing-container {
margin: auto;
min-width: 825px;
max-width: 1000px;
}
.csg-header {
padding: 12px 0;
}
.a-spacing-small,
.a-ws .a-ws-spacing-small {
margin-bottom: 10px !important;
margin-top: 2px !important;
}
.a-row {
width: 100%;
}
#csg-support-topics {
margin-bottom: 20px;
}
.csg-box {
border: 1px solid #ddd;
border-radius: 6px 6px 6px 6px;
margin-bottom: 20px;
}
#csg-support-topics .csg-box-inner {
padding: 0 10px 0 0;
}
.csg-box .csg-box-inner {
position: relative;
padding: 9px;
}
.container-unpublished {
background: none !important;
}
.node-unpublished {
background: #ffffff;
}
.csg-hover-box .csg-hover-box-categories {
float: left;
width: 260px;
background: none repeat scroll 0 0 #f3f3f3;
border-right: 1px solid #ddd;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
padding: 12px 0 19px 16px;
min-height: 328px;
}
.a-ordered-list.a-list-link,
.a-unordered-list.a-list-link,
ol.a-list-link,
ul.a-list-link {
margin: -2px 0 0;
}
.a-ordered-list.a-nostyle,
.a-unordered-list.a-nostyle,
ol.a-nostyle,
ul.a-nostyle {
margin-left: 0;
color: #111;
}
.a-ordered-list,
.a-unordered-list,
ol,
ul {
padding: 0;
}
.a-ordered-list.a-list-link li,
.a-unordered-list.a-list-link li,
ol.a-list-link li,
ul.a-list-link li {
display: block;
position: relative;
}
.a-ordered-list.a-nostyle li,
.a-unordered-list.a-nostyle li,
ol.a-nostyle li,
ul.a-nostyle li {
list-style: none;
}
.csg-category {
position: relative;
}
.a-ordered-list li,
.a-unordered-list li,
ol li,
ul li {
word-wrap: break-word;
margin: 0;
}
.csg-hover-box ul.a-list-link li a {
text-decoration: none;
}
.a-ordered-list.a-list-link li a,
.a-unordered-list.a-list-link li a,
ol.a-list-link li a,
ul.a-list-link li a {
padding: 2px 0;
}
.a-ordered-list.a-list-link a,
.a-unordered-list.a-list-link a,
ol.a-list-link a,
ul.a-list-link a {
color: #111;
display: block;
}
.arrow {
display: none;
float: right;
height: 14px;
right: 5px;
margin-right: 0;
margin-top: 8px;
position: absolute;
top: -3px;
width: 8px;
}
.a-icon-supplemental {
opacity: .64;
width: 8px;
height: 11px;
background-position: -77px -5px;
}
.a-icon,
.a-link-emphasis:after {
background-image: url(https://m.media-amazon.com/images/G/01/AUIClients/AmazonUIIcon-sprite_1x-003a05344e6a5263c945684c66748394b4cbb9a2._V2_.p);
-webkit-background-size: 400px 900px;
background-size: 400px 900px;
background-repeat: no-repeat;
display: inline-block;
vertical-align: top;
}
em,
i {
font-style: italic;
}
.csg-hover-box .csg-hover-box-content {
float: left;
margin-left: 230px;
border-left: 1px solid #ddd;
margin-left: -1px;
padding: 16px 2%;
display: none;
}
.csg-hover-box .csg-hover-box-content.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="help-content csg" style="display: block;">
<div class="csg-inner">
<div class="csg-box" id="csg-support-topics">
<div class="csg-box-inner">
<div class="csg-hover-box clearfix">
<div class="csg-hover-box-categories">
<ul id="category-section" class="a-nostyle a-list-link">
<li class="csg-category">
<a class="active" href="https://www-new.riosalado.edu/library" rel="#help-gateway-category-0">Academic Support</a>
<div style="display: block;" class="nav-sprite arrow"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" rel="#help-gateway-category-1" class="">
Consumer Information
</a>
<div href="" class="nav-sprite arrow" style="display:block"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" rel="#help-gateway-category-2" class="">
Paying for College
</a>
<div href="" class="nav-sprite arrow" style="display: block;"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" rel="#help-gateway-category-3" class="">
General Help
</a>
<div class="nav-sprite arrow" style="display:block"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/advisement/Pages/default.aspx" rel="#help-gateway-category-4" class="">
Enrollment Support
</a>
<div class="nav-sprite arrow" style="display: block;"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/about/teaching-learning/student-life/graduation/commencement/Pages/default.aspx" rel="#help-gateway-category-5" class="">
Public Safety
</a>
<div class="nav-sprite arrow" style="display: block;"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" rel="#help-gateway-category-6" class="">
Graduation & Career Svc
</a>
<div class="nav-sprite arrow" style="display: block;"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/about/teaching-learning/student-life/graduation/commencement/Pages/default.aspx" rel="#help-gateway-category-7" class="">
Student Services
</a>
<div class="nav-sprite arrow" style="display: block;"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/about/teaching-learning/student-life/graduation/commencement/Pages/default.aspx" rel="#help-gateway-category-8" class="">
Technical Help
</a>
<div class="nav-sprite arrow" style="display: block;"><i class="a-icon a-icon-supplemental"></i></div>
</li>
<li class="csg-category">
<a href="http://www.riosalado.edu/help/Pages/default.aspx" rel="#help-gateway-category-9" class="">
Need More Help
</a>
<div class="nav-sprite arrow" style="display: block;"><i class="a-icon a-icon-supplemental"></i></div>
</li>
</ul>
</div>
<div class="csg-hover-box-content active" id="help-gateway-category-0">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li tabindex="0">
<h3 class="a-spacing-small">
<strong>Academic Support</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="https://www-new.riosalado.edu/students/tutoring/tutoring-home" target="_self">Advisement</a>
<li>
<a class="same_window cs-override-recommended" href="https://www-new.riosalado.edu/students/tutoring/tutoring-home" target="_self">Counselling</a>
<li>
<a class="same_window cs-override-recommended" href="https://www-new.riosalado.edu/library" target="_self">Library</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="https://www-new.riosalado.edu/students/tutoring/tutoring-home" target="_self">Tutoring</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="https://www-new.riosalado.edu/help" target="_self">Helpdesk</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-1">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li tabindex="-1">
<h3 class="a-spacing-small">
<strong>Consumer Information</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" target="_self">All Topics</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" target="_self">Student Outcomes</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" target="_self">Health Safety</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-2">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li tabindex="-1">
<h3 class="a-spacing-small">
<strong>Paying for College</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/advisement/Pages/default.aspx" target="_self">Financial Aid</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/cashier/Pages/default.aspx" target="_self">Paying for College</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/counseling/Pages/default.aspx" target="_self">Cashiers</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-3">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li>
<h3 class="a-spacing-small">
<strong>General Help</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" target="_self">Lost And Found</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/consumerinformation/Pages/default.aspx" target="_self">Locations</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-4">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li>
<h3 class="a-spacing-small">
<strong>Enrollment Support</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/advisement/Pages/default.aspx" target="_self">Need help picking classes</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/selfserve/Pages/default.aspx" target="_self">Registering for classes</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/web/newstudents/" target="_self">First time taking classes at Rio?</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-5">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li>
<h3 class="a-spacing-small">
<strong>Public Safety</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/advisement/Pages/default.aspx" target="_self">Public Safety</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/selfserve/Pages/default.aspx" target="_self">Need Emergency Crisis Emotional Support?</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-6">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li>
<h3 class="a-spacing-small">
<strong>Graduation & Career SvC</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/about/teaching-learning/student-life/graduation/commencement/Pages/default.aspx" target="_self">Attend Commencement</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-7">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li>
<h3 class="a-spacing-small">
<strong>Student Services</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/advisement/Pages/default.aspx" target="_self">Advisement</a>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/counseling/Pages/default.aspx" target="_self">Counseling</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-8">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li>
<h3 class="a-spacing-small">
<strong>Technical Help</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/about/teaching-learning/student-life/graduation/commencement/Pages/default.aspx" target="_self">How do I log in to RioLearn </a>
</li>
<li>
<a class="same_window cs-override-recommended" href="https://matrix.riosalado.edu/RioWebApps/Public/Rio.SelfSub.UI/Verification.aspx" target="_self">Get Your Username/MEID & Password</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="csg-hover-box-content" id="help-gateway-category-9">
<div class="a-row">
<div class="cat-links-container" style="width: 500px;">
<div class="a-column">
<ul class="category-list a-nostyle a-list-link ">
<li>
<h3 class="a-spacing-small">
<strong>Need More Help</strong>
</h3>
</li>
<li>
<a class="same_window cs-override-recommended" href="http://www.riosalado.edu/help/Pages/default.aspx" target="_self">Contact Rio Salado College</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>