Adding active class in menu only works on first page

Posted by rileychuggins on Stack Overflow See other posts from Stack Overflow or by rileychuggins
Published on 2013-10-31T15:51:37Z Indexed on 2013/10/31 15:53 UTC
Read the original article Hit count: 308

Filed under:
|
|

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery