補充身體#ID基於URL

需要幫助！我一直在尋找這個看似簡單的任務的解決方案，但找不到確切的一個。無論如何，我試圖根據頁面的URL向標籤添加自定義#id。我使用的腳本在URL如下所示時工作正常。補充身體#ID基於URL

- http://localhost.com/index.html 
- http://localhost.com/page1.html 
- http://localhost.com/page2.html 
-> on this level, <body> gets ids like #index, #page1, #page2, etc...

我的問題是，即使在查看這樣的子頁面時，如何使body #id仍然是＃page1或＃page2？

- http://localhost.com/page1/subpage1 
- http://localhost.com/page2/subpage2

這裏的JS代碼我使用（網上查到）

$(document).ready(function() { 
    var pathname = window.location.pathname; 
    var getLast = pathname.match(/.*\/(.*)$/)[1]; 
    var truePath = getLast.replace(".html",""); 
      if(truePath === "") { 
        $("body").attr("id","index"); 
      } 
      else { 
        $("body").attr("id",truePath); 
      }  
    });

提前感謝！

編輯：感謝所有的答覆！基本上我只是想根據自己的body＃id在每個頁面上放置自定義背景圖片。 >> js在這裏點菜。

http://localhost.com/page2/subpage2 - > my only problem is how to make the id as #page2 and not #subpage2 on this link.

來源

2011-09-19 Jon

你有沒有考慮在jsp或html源代碼中設置body id值，而不是用javascript設置它？ – DwB

你已經有代碼。它工作嗎？如果不是 - 問題是什麼？ – Neal

這段代碼對於任何一個網址 – Joe

使用JavaScript split功能可能是幫助在這裏。例如（未經測試，但總體思路）：

var url = window.location.href.replace(/http[s]?:\/\//, '').replace('.html', ''); 
var segments = url.split('/'); 

$('body').id = segments[0];

另外，您可能要考慮使用類而不是ID。這樣，您就可以每一段分配爲一類......

var url = window.location.href.replace(/http[s]?:\/\//, '').replace('.html', ''); 
var segments = url.split('/'); 

for (var i = 0; i < segments.length; i++) { 
    $('body').addClass(segments[i]); 
}

編輯：

很高興它的工作。幾個筆記，如果你打算使用這個真實的：如果你有一個擴展名除了.html，將在類名拾取。您可以通過更改替換的正則表達式考慮到這一點......

var url = window.location.href.replace(/http[s]?:\/\//, ''); 
// Trim extension 
url = url.replace(/\.(htm[l]?|asp[x]?|php|jsp)$/,'');

如果將永遠是對的URL查詢字符串，你會想篩選出那些太（這是一個正則表達式我不是100％） ...

url = url.replace(/\?.+$/,'');

而且，這是一個有點低效在每次$('body') for循環「繞」，因爲這將導致jQuery來不得不重新發現身體標記。更高性能的方式做到這一點，特別是如果子文件夾，最後2或3深將一次找到它，然後「緩存」它像這樣變..

var $body = $('body'); 
for (...) { 
    $body.addClass(... 
}

來源

2011-09-19 19:17:48

謝謝！我使用了第二個類的代碼，併成功將.page2（和.subpage2）添加到。 :) – Jon

如果您按原樣使用代碼（按原樣的過去時態版本）添加了一些改進。 –

嗨，再次感謝！是的，我正在使用您的代碼。不勝感激！ – Jon

你的正則表達式只會選擇url的最後部分。

var getLast = pathname.match（/。/（。）$ /）[1];

你匹配任何東西（*），後跟一個斜線，跟任何東西（這時候，捕獲此值），然後拉出第一場比賽，這是唯一的比賽。

如果你真的想這樣做（我有我的懷疑，這似乎是一個壞主意），那麼你可以只使用window.location.pathname，因爲已經有FULLPATH在那裏。

編輯：你真的不應該需要這樣做，因爲頁面的URL已經是一個唯一的標識符。我無法真正想到任何情況下，您需要爲頁面上的body元素設置唯一的id屬性。無論何時您處理該內容（無論是從客戶端JavaScript還是從刮板處理），您都應該擁有唯一的標識符 - URL。

什麼是你真正想幹什麼？

來源

2011-09-19 19:17:38 tjarratt

我基本上想要將自定義背景圖像放在每個基於body＃id的頁面上。 – Jon

嘗試以下。基本上，它將id設置爲域後出現的任何文件夾或文件名，但不包括文件擴展名。

$(document).ready(function() { 
    $("body").attr("id",window.location.pathname.split("/")[1].split(".")[0]); 
}

來源

2011-09-19 19:19:51 cheeken

你想要得到的路徑，而不是最後的第一部分：

var getFirst = pathname.match(/^\/([^\/]*)/)[1];

來源

2011-09-19 19:22:22 Guffa

如果您的網頁都有一個共同的名字作爲你的榜樣（「頁」），你可以修改腳本包括改變你的比賽模式，以包括部分：

var getLast = pathname.match(/\/(page\d+)\//)[1];

上面將匹配「頁」後跟數字的位數（省略了「HTML」結尾太）。

來源

2011-09-19 19:23:25 jcadcell

補充身體#ID基於URL

回答

相關問題