Question

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

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>

为什么这不起作用？

Answer 1

由于您使用include在每个页面上包含该函数，因此您可能需要在每次加载页面时调用该函数。

因此，在每个页面内（在打开<body>标记之后）从JS脚本块内部运行您的函数，如下所示：

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

另外，不要让你的函数变成一个变量 - 我只是把它变成一个像这样的普通函数：

function services_refresh(){
    // code here
}

Answer 2

我终于想出了如何解决我的问题。

以下是我必须为三个页面中的每一个做的事情的示例：

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

    }
  }
};

在菜单中添加活动类仅适用于第一页

2 个答案: