Adding active class in menu only works on first page
- by rileychuggins
I have nav links that become active once they come into the window. I need to implement this on three separate pages on my website but the following scripts only work for the first page.
var services_refresh = function () {
// do stuff
console.log('Stopped Scrolling');
if($('#ct_scans.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#ct_scans"]').addClass('active');
} else if($('#xray.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#xray"]').addClass('active');
} else if($('#fluoroscopy.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#fluoroscopy"]').addClass('active');
} else if($('#mri.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#mri"]').addClass('active');
} else if($('#neuroimaging.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#neuroimaging"]').addClass('active');
} else if($('#nuclear_medicine.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#nuclear_medicine"]').addClass('active');
} else if($('#ultrasound.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#ultrasound"]').addClass('active');
} else if($('#mammography.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#mammography"]').addClass('active');
} else if($('#breast_ultrasound.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_ultrasound"]').addClass('active');
} else if($('#breast_biopsy.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_biopsy"]').addClass('active');
} else if($('#breast_mri.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_mri"]').addClass('active');
} else if($('#osteoporosis.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#osteoporosis"]').addClass('active');
}
};
Here is my HTML for the first page that works:
<ul id="our_services_sub_sections" class="diagnostic_images">
<li><a class="scroll active" href="#ct_scans">CT Scans</a></li>
<li><a class="scroll" href="#xray">X-Ray</a></li>
<li><a class="scroll" href="#fluoroscopy">Fluoroscopy</a></li>
<li><a class="scroll" href="#mri">MRI</a></li>
<li><a class="scroll" href="#neuroimaging">Neuroimaging</a></li>
<li><a class="scroll" href="#nuclear_medicine">Nuclear Medicine</a></li>
<li><a class="scroll" href="#ultrasound">Ultrasound</a></li>
</ul>
Here is my HTML for the second page which does not work:
<ul id="our_services_sub_sections" class="womens_imaging">
<li><a class="scroll active" href="#mammography">Mammography</a></li>
<li><a class="scroll" href="#breast_ultrasound">Breast Ultrasound</a></li>
<li><a class="scroll" href="#breast_biopsy">Breast Biopsy</a></li>
<li><a class="scroll" href="#breast_mri">Breast MRI</a></li>
<li><a class="scroll osteo" href="#osteoporosis">Osteoporosis<br />Evaluation (DEXA)</a></li>
</ul>
Why is this not working?
