jQuery 根据页面 URL 添加类和单独的类

标签 jquery html css

我想找到一种方法来从 url 中提取要添加到正文中的类。我做了一些尝试,但我只设法获得了最后一段网址。 你知道我该怎么做吗?

这是我尝试用 jquery 做的

var dir= window.location.pathname.split('?')[0].split('/').filter(function (i) { return i !== ""}).slice(-1)[0]
jQuery("body").addClass(dir);

这是我的:

 http://www.test.com/news/hello/
<body class="hello"></body>

http://www.test.com/news/
<body class="news"></body>

这是我想要的

 http://www.test.com/news/hello/
    <body class="hello news"></body>

最佳答案

slice 方法返回一个数组,因此您需要做的就是删除 [0],以便您可以拥有所有类。

您还应该将 2 作为 slice 的参数,以便它可以在您的基本 url 之后获取您的所有类。

var url = " http://www.test.com/news/hello/"
var dir = url
        .split('?')[0]
        .split('/')
        .filter(function (i) { return i !== ""})
        .slice(2);
        
$("div p").addClass(dir);
.news {
  color: red;
}

.hello {
  font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <p>Hello world</p>
</div>

关于jQuery 根据页面 URL 添加类和单独的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55301232/

相关文章:

javascript - 调整窗口大小时删除特定类

javascript - 具有 Bootstrap 的响应式全宽图像网格

php - 重定向到一个新页面,其中包含 Javascript 中的发布数据

html - 大胖子 HTML5 应用程序..它在一个文件中包含所有内容(CSS、图像、JS 库)。可能的?

javascript - 淡化除特定类别外的整个页面

javascript - onload 操作仅在基于 WebKit 的 Chrome 上的同一页面上运行一次

javascript - HTML5 + Javascript音频播放中特定时间触发事件

javascript - 我无法从输入框中获取值

javascript - 我怎样才能制作一个互动的自动收报机?

jquery - 无法在 Bootstrap 导航栏中通过 Tab 键选择下拉菜单