使用Javascript和jQuery导航中的当前页面

我试图将当前页面设置为在主导航栏中反映。我在每个页面中为JS/jQuery设置了一个div，用以下代码检查它是否是正确的页面：

$(document).ready(function() {

  if ($('div').is('#example1-page')) {
    $("a#nav-example1").addClass('nav-example1-current');
    $("#nav-example1 p").css('display','block');
  } 
  else if ($('div').is('#example2-page')) {
    $("a#nav-example2").addClass('nav-example2-current');
    $("#nav-example2 p").css('display','block');
  }
  else if ($('div').is('#example3-page')) {
    $("a#example3").addClass('nav-example3-current');
    $("#nav-example3 p").css('display','block');
  }
});

我知道必须有更好的方法来使用数组或其他我不重复自己的东西。您可以将链接ID存储在一个数组中，通过单击具有正确ID的链接，JS将知道如何在导航中设置当前页面。但我不知道从哪里开始

试试这个

$(document).ready(function() {
  if ($('#example1-page').length) {
    $("a#nav-example1").addClass('nav-example1-current');
    $("#nav-example1 p").show();
  } 
  else if ($(#example2-page').length) {
    $("a#nav-example2").addClass('nav-example2-current');
    $("#nav-example2 p").show();
  }
  else if ($('#example3-page').length) {
    $("a#example3").addClass('nav-example3-current');
    $("#nav-example3 p").show();
  }
});

---

数组的数组是您的朋友：。试试这个：

$(document).ready(function() {
    var pageCounter=3;
    var pages=[];
    for(var i=1;i<=pageCounter;i++){
        var selectors=["#example"+i+"-page",
                   "a#nav-example"+i,
                   "nav-example"+i+"-current",
                   "#nav-example"+i+" p"];
        pages.push(selectors);
    }

    for(var i=0;i<=pageCounter;i++){
         if ($('div').is(pages[i][0])) {
            $(pages[i][1]).addClass(pages[i][2]);
            $(pages[i][3]).css('display','block');
            break;
         }
    } 
});

注意：初始化页面数组的逻辑不需要是document.ready的一部分