自動突出顯示當前url（即使在on/page/x時）

我試圖自動向菜單中的URL中添加'當前'類，並且已經成功地使用此代碼。自動突出顯示當前url（即使在on/page/x時）

$(document).ready(function() { 
$('a').each(function() { 
    if ($(this).prop('href') == window.location.href) { 
     $(this).addClass('current'); 
    } 
}); 
});

我希望這是分頁工作，所以如果/ page/x出現在來自href的URL之後，它會添加當前值。目前只有當URL完全相同時纔會突出顯示。

我已經做了一些搜索，但似乎無法看到如何做到這一點。

我非常感謝一些指導。先謝謝你。

來源

2016-11-02 Joseph

你可以用'/ split'（）分割你的字符串，並檢查它的基址。 – Aer0

//Give all your links that don't point to home some class...  

$(document).ready(function() { 
     $('a.someClass').each(function() { 
      if (window.location.href.indexOf($(this).prop('href')) != -1) { 
       $('a.someClass').removeClass('current'); 
       $(this).addClass('current'); 
      } 
     }); 
    }); 

    // A much simpler way to do the same will be 
    var $a = $("a.someClass"); 
    $a.click(function() { 
     if (window.location.href.indexOf($(this).prop('href')) != -1) { 
      $a.removeClass('current'); 
      $(this).addClass('current'); 
     } 
    }); 

    // If it still doesn't help, 
    // just try to make a codepen/jsbin of your code along with html...

來源

2016-11-02 11:13:24

嗨，感謝您的回覆，但是這會導致家庭網址始終處於最新狀態。 – Joseph

你能展示更多的代碼嗎？跟html一樣？一個codepen會更好... –

本質上，頂級菜單有5個類別，（家www.myurl.com，寫作www.myurl.com/writing，音樂www.myurl.com/music等）。當你點擊寫作或音樂時，你可以去/寫或/音樂。使用原始代碼，相應的代碼用「當前」類強調。然後，當您轉到音樂（www.myurl.com/music/page/2）的第2頁時，當前課程將從菜單中的音樂中刪除。有了這裏的所有答案，目前的課程仍然是Music，但也永久在家（www.myurl.com）。希望這更有意義，因爲我不知道如何做一個代碼。 – Joseph

我試圖用純JavaScript做事情，但你可以用jQuery簡化它。（我對此感到懶惰）

var links = document.getElementsByTagName("a"); 
for(var i = 0;i< links.length; i++) 
{  
    if(links[i].pathname == document.location.pathname) 
    { 
     links[i].classList.add("current"); 
    } 
}

以前的版本包含冗餘的檢查。

來源

2016-11-02 11:24:39

我不能添加任何代碼片段，因爲我想在這裏禁止使用'document.location.pathname'。 –

嗨，感謝您的回覆，但是這會導致家庭網址始終處於當前狀態。 – Joseph

你有一個AJAX觸發頁面嗎？你能用'console.log（）'調試代碼嗎？ –

自動突出顯示當前url（即使在on/page/x時）

回答

相關問題