Two tabbed navigations are present, one at the top and one at the bottom. Targeting the div through classes allows for relevant content to be displayed in both.
Clicking the "Business" tab should show user-relevant information on both the top and bottom tabs. However, I am facing an issue where only the tab clicked appears in the "active" state. Even though they share the same class name.
Any assistance would be much appreciated.
Sincerely, Mike
HTML:
<!-- TOP TAB -->
<section id="registerTabsContainer">
<ul class="tabs">
<li><a href=".tabViewer">Are you a Viewer?</a></li>
<li><a href=".tabBusiness">Are you a Business?</a></li>
<li><a href=".tabPlatform">Are you a Platform?</a></li>
</ul>
<!-- TOP CONTENT -->
<div class="registerTabsContent tabViewer">
<h1>Register as a Viewer</h1>
</div>
<div class="registerTabsContent tabBusiness">
<h1>Register as a Business</h1>
</div>
<div class="registerTabsContent tabPlatform">
<h1>Register as a Platform</h1>
</div>
<!-- BOTTOM TAB -->
<section id="tourSummaryTabsContainer">
<ul class="tabs">
<li><a href=".tabViewer">Are you a Viewer?</a></li>
<li><a href=".tabBusiness">Are you a Business?</a></li>
<li><a href=".tabPlatform">Are you a Platform?</a></li>
</ul>
<!-- BOTTOM CONTENT -->
<div class="tourSummaryTabsContent tabViewer">
<h1> Viewer content Bottom</h1>
</div>
<div class="tourSummaryTabsContent tabBusiness">
<h1>Register as a Business</h1>
</div>
<div class="tourSummaryTabsContent tabPlatform">
<h1>Register as a Platform</h1>
</div>
JQUERY:
$(document).ready(function() {
// tabs script
$('.tabs li a:first').addClass('active');
$('.registerTabsContent:not(:first), .tourSummaryTabsContent:not(:first)').hide();
$('.tabs li a').click(function() {
var t = $(this).attr('href');
$('.tabs li a').removeClass('active');
$(this).addClass('active');
$('.registerTabsContent, .tourSummaryTabsContent').hide();
$(t).fadeIn('slow');
return false;
})
});
CSS:
.tabs {
list-style-type: none;
margin:0;
padding:0;
}
.tabs li {
padding: 0;
list-style-type: none;
margin:0;
float:left;
list-style:none;
}
.tabs li a {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#999999;
padding:7px 25px 4px 25px;
display:block;
text-decoration:none;
background: rgba(227,227,227,1);
/*border-right: 1px solid rgba(153,153,153,1); */
}
.tabs li a.active {
background: white;
color:#999999;
/*border-top: 1px solid white;*/
}
.tabs li a:hover {
padding:7px 25px 4px 25px;
background:#fff;
}