Javascript 在菜单中添加活动类仅在第一页有效

我有导航链接，一旦进入窗口，它们就会激活。我需要在我的网站上的三个单独的页面上实现这一点，但以下脚本仅适用于第一个页面

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');
    }
};

以下是我的第一页HTML：

 <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>

下面是我的第二页HTML，它不起作用：

<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>

---

为什么不起作用？

因为您使用include在每个页面上包含函数，所以您可能需要在每次加载页面时调用该函数

因此，在每个页面中（在打开

标记之后）从JS脚本块内部运行函数，如下所示：

<script type="text/javascript">
    //call the function
    services_refresh();
</script>

---

我终于想出了解决问题的办法

以下是我在这三页中每一页都要做的一个例子：

var services_refresh = function () { 

if($('#firstpage.anchor').length != 0) {

  if($('#firstpage.anchor').visible()) {

       $('#nav_sub_section li a').removeClass('active');

       $('#nav_sub_section li a[href="#firstpage"]').addClass('active');

   }

} else if($('#secondpage.anchor').length != 0) {

    if($('#secondpage.anchor').visible()) {

        $('#nav_sub_section li a').removeClass('active');

        $('#nav_sub_section li a[href="#secondpage"]').addClass('active');

    }

} else if($('#thirdpage.anchor').length != 0) {

    if($('#thirdpage.anchor').visible()) {

        $('#nav_sub_section li a').removeClass('active');

        $('#nav_sub_section li a[href="#thirdpage"]').addClass('active');

    }
  }
};

---

这两个页面中是否有重复的ID？是否确定后续页面中包含/调用了JS？当第二个页面进入窗口时，是否再次调用

服务\u refresh（）

函数？或者你只叫它一次？@Krishna唯一重复的ID是ul

我们的服务子部分

，但我也尝试在JS脚本

我们的服务子部分中引用这些ID。诊断图像

和

我们的服务子部分。女性图像

，但都不起作用either@FastTrack你可能会某物但我不知道如何在另一页上再次调用它？不幸的是，这并不能解决我的问题。@rileychuggins尝试像我上面展示的那样修改你的函数。不要将其设置为变量-使其独立运行，而无需变量声明。然后试着在每个页面上调用它，就像我展示的那样。如果我使用

function services\u refresh（）{}

没有任何变化。

var services_refresh = function () { 

if($('#firstpage.anchor').length != 0) {

  if($('#firstpage.anchor').visible()) {

       $('#nav_sub_section li a').removeClass('active');

       $('#nav_sub_section li a[href="#firstpage"]').addClass('active');

   }

} else if($('#secondpage.anchor').length != 0) {

    if($('#secondpage.anchor').visible()) {

        $('#nav_sub_section li a').removeClass('active');

        $('#nav_sub_section li a[href="#secondpage"]').addClass('active');

    }

} else if($('#thirdpage.anchor').length != 0) {

    if($('#thirdpage.anchor').visible()) {

        $('#nav_sub_section li a').removeClass('active');

        $('#nav_sub_section li a[href="#thirdpage"]').addClass('active');

    }
  }
};