jQuery根據頁面URL添加類
[英]jQuery add class based on page URL
問題描述
我有一個我認為很簡單的問題，但我無法讓它為我的生活工作。
我想要做的就是向頁面添加一些 javascript，根據 URL 向主頁容器添加一個類。
假設我在 root.com 上有一個站點和以下 html 結構（粗略地說）：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main" class="wrapper">
Blah, blah, blah
</body>
</html>
我想要做的是一個腳本，如果頁面 =（例如）root.com/technology，它會向主 div 添加一個類。 所以 div 現在看起來像：
<div id="main" class="wrapper tech">
我已經加載了 jquery，所以我想這樣做。
5 個解決方案
解決方案1
27 已采納 2012-04-02 20:13:46
您可以使用window.location獲取當前 URL，然后基於該 URL 進行切換：
$(function() {
var loc = window.location.href; // returns the full URL
if(/technology/.test(loc)) {
$('#main').addClass('tech');
}
});
這使用正則表達式來查看 URL 是否包含特定短語（特別是： technology ），如果是，則向#main元素添加一個類。
解決方案2
8 2012-04-02 21:05:54
好吧，這是我將如何做到的：
switch (window.location.pathname) {
case '/technology':
$('#main').addClass('tech');
break;
case '/something':
// code block
break;
case '/somestuff':
$('#main').addClass('some');
break;
default:
// code block
}
這樣，您可以保持代碼整潔，並且可以輕松添加另一個案例。
在這里查看window.location.pathname含義。
解決方案3
3 2012-04-02 20:11:58
像下面這樣的東西會有幫助嗎？ 基於其他答案，只是通過做
控制台日志（窗口。位置）
，您可以獲取與您的位置對象相關的豐富信息
if(window.location.href=== "root.com/technology") {
$("#main").addClass("tech");
}
解決方案4
2 2012-04-02 20:09:35
使用location內置對象來確定完整的 URL 或它的某些部分。
解決方案5
0 2021-03-05 05:59:15
$(function(){
var cUrl = window.location.href;
$(".product-type-swatches__list a").each(function(){
if ($(this).attr("href") == cUrl){
$(this).addClass("is-selected");
}
});
});
jQuery根據頁面URL /名稱更改具有ID或元素的元素的類
[英]JQuery changing class of element with id or class based on page url/name
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.