使用jQuery添加基於URL的類

我正在使用jQuery，我試圖添加一個類到基於URL的菜單項。我嘗試了這個（在其他主題中發現），但無法讓它正常工作。它將類添加到當前頁面url之後的每個菜單項。使用jQuery添加基於URL的類

這裏是我的代碼：

<script type='text/javascript'> 
    $(document).ready(function(){ 
    $(function() { 
     switch (window.location.pathname) { 
      case '/p/about.html': 
        $('.nav-about').addClass('current') 
      case '/search/blog': 
        $('.nav-blog').addClass('current') 
      case '/p/design.html': 
        $('.nav-design').addClass('current') 
      case '/p/photography.html': 
       $('.nav-photography').addClass('current') 
      case '/p/hosting.html': 
       $('.nav-hosting').addClass('current') 
     } 
     }); 
    }); 
</script>

上糾正任何幫助？

謝謝。

編輯：對於那些問，我使用Blogger。我沒有使用默認的「鏈接列表」，而是創建了自己的響應菜單。這裏只有一個模板，所以它不像我可以爲每個HTML頁面添加一個類。它必須用jQuery來完成，因爲Blogger不會將特定的類添加到特定的頁面。所以我需要抓取URL來將相應的類應用到相應的菜單項。

來源

2013-05-01 Xarcell

你爲什麼不在HTML中做這件事？ – Blender 2013-05-01 21:50:05

我正在使用Blogger，並使用我製作的自定義菜單（響應式），而不是使用默認鏈接列表。 – Xarcell 2013-05-01 21:52:03

你需要一個break每種情況後否則將只是去到下一個。

switch (window.location.pathname) { 
    case '/p/about.html': 
     $('.nav-about').addClass('current'); 
     break; 
    case '/search/blog': 
     $('.nav-blog').addClass('current'); 
     break; 
    case '/p/design.html': 
     $('.nav-design').addClass('current'); 
     break; 
    case '/p/photography.html': 
     $('.nav-photography').addClass('current'); 
     break; 
    case '/p/hosting.html': 
     $('.nav-hosting').addClass('current'); 
     break; 
}

麪點，這是重複的：

$(document).ready(function(){ 
    $(function() {

這兩方面的意思是一樣的，使用其中一個。

來源

2013-05-01 21:50:46 Neal

很好，這工作。我完全瞭解如何使用休息。 – Xarcell 2013-05-01 22:00:23

如果要添加current類的元素具有相對於當前頁面的URL的href值，則此方法對您而言可能更容易。

你也許可以簡化這個有點..

比方說，你下頁：http://domain.com/page.html

var current_location = window.location.href.split('/'); // ['http:', '', '', 'domain.com', 'page.html'] 
var page; 

page = current_location[current_location.length - 1]; // the length of the current_location array is 5, subtract one to get the value of the 4th index - which is page.html 

$('a[href*="' + page + '"]').addClass('current'); // find a link on the page that links to page.html (current page) and add a class of `current` to this URL

這裏有jsbin一個例子：http://jsbin.com/uzoyis/1

來源

2013-05-01 21:58:34

如果重定向不在錨標籤中發生，該怎麼辦？該URL不一定在元素的href內，因此您不能依賴它在那裏找到它。 – Lix 2013-05-01 22:08:13

你是對的。我認爲他正在使用具有'href'屬性的錨。 – 2013-05-01 22:11:52

，沒關係！有時我們確實需要猜測！如果你對OP可能遺漏的一些細節做出了假設，你應該在你的答案中聲明。 – Lix 2013-05-01 22:15:57

我會提出不同的建議。從你給的例子，這將是非常可能提取從URL本身的要素類：

var url = window.location.pathname; 
var elementName = url.match(/\/(\w+)\.?\/?$/); 
$('.nav-' + elementName).addClass('current');

的正則表達式匹配：

\/ - 一個斜槓（需要進行轉義）。
(\w+) - 多個單詞字符。這也被「俘獲」並返回。
\.? - 文字上的點字符（需要太轉義）。這是爲了匹配文件擴展名的開頭，如.php或.html。問號使其成爲可選項。
\/? - 字面斜槓字符（也需要轉義）。這是匹配URL的尾部斜線，如/members/。問號使其成爲可選項。
$ - 匹配字符串的末尾。

的導航元素完整的類名，然後從.nav-串聯組成，哪些曾被匹配和正則表達式捕獲。

這實際上取決於你的URL的格式，但對於你的示例URL來說，這將工作得很好。這段代碼真的可以讓你以DRY的心態 - 不要重複自己。

來源

2013-05-01 22:02:57 Lix

我推薦給你的搜索鏈接的類，做這樣的事情：

$(document).ready(function(){ 
    var current = window.location.pathname; 
    $('.search-link').each(function(){ 
     var link = '/' + $(this).attr('href'); 
     if (current == link){ 
     $(this).parent().addClass('active'); 
     } 
    }); 
});

這將比較當前路徑各個環節的href，如果他們匹配添加活動類。鏈接var中的'/'是可選的，取決於它是否已經在href中。（））.parent（）。addClass（'active'）將一個活動類添加到父'li'元素，如果路徑匹配與bootstrap很好地匹配，但是您希望該類以及它的作用所謂的將取決於你的CSS。

來源

2014-08-14 00:14:03 nbarth

使用jQuery添加基於URL的類

回答

相關問題