css - 如何根据查询字符串参数更改 CSS 类

Question

我有一个 SharePoint 服务器 Intranet 站点，该站点显示已分配标签以帮助排序的博客文章。 SharePoint 允许您使用查询字符串对博客整体进行动态排序 - 因此从技术上讲，页面 URL 保持不变，它只是将“?name=topic”添加到 URL 的末尾以对博客文章进行排序。

我在顶部有一排简单的标题，允许用户单击标题对页面上显示的信息进行排序。每个标题都是相同的 URL，但末尾有不同的查询字符串。

例如排序依据:
视频 (www.websitename.aspx?name=video)

图片 (www.websitename.aspx?name=images)

音频 (www.websitename.aspx?name=audio)

我想根据“事件”或选定标题来设置标题样式。如何根据查询字符串参数将标题的 CSS 类更改为“已选择”？ (或者有更简单的方法吗？)

我仍在学习 Javascript - 所以我正在寻找一种实现起来不太困难的解决方案。

谢谢!

贾里德

Answer 1

您可以使用 Javascript 轻松获取查询字符串:

window.location.search.substring(1);

window.location是整个URL，search.substring是问号后面的部分。所以现在你可以实现一个丑陋的 switch 语句，根据你的查询字符串改变样式:

  var queryString = window.location.search.substring(1); 

  switch (queryString) {
    case "video": videoelement.style.background = red;
                   break;

    case "images": imageselement.style.background = red;
                     break;

    case "audio": audioelement.style.background = red;
                     break;
  }