jQuery基于页面URL添加类答案

【问题标题】：jQuery add class based on page URLjQuery基于页面URL添加类
【发布时间】：2012-04-16 12:09:32
【问题描述】：

我认为是一个简单的问题，但我无法让它为我的一生工作。

我要做的就是向页面添加一些 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，所以我想这样做。

【问题讨论】：

标签： javascript jquery css url

【解决方案1】：

您可以使用window.location获取当前网址，然后根据该网址进行切换：

$(function() {
  var loc = window.location.href; // returns the full URL
  if(/technology/.test(loc)) {
    $('#main').addClass('tech');
  }
});

这使用正则表达式来查看 URL 是否包含特定短语（特别是：technology），如果是，则将类添加到 #main 元素。

【讨论】：

@alex vidal 它对我来说效果很好，但它的加载时间比正常情况要晚一些。一旦用户处于确定状态，我将使用此操作来保持子菜单打开因此用户可以在 1-2 秒后看到子类别菜单如何打开。我希望它立即执行此操作，我该如何避免这种情况？
如果您在站点的路径（主页）上，如何修改它以使其工作？
谢谢！你能告诉我.test 是做什么的吗？

【解决方案2】：

好吧，我会这样做：

switch (window.location.pathname) {
    case '/technology':
        $('#main').addClass('tech');
        break;
    case '/something':
        // code block
        break;
    case '/somestuff':
        $('#main').addClass('some');
        break;
    default: 
        // code block
}

这样，您可以保持代码整洁，并且可以轻松添加另一个案例。

请参阅here window.location.pathname 的含义。

【讨论】：

我喜欢这个，因为正如您所说，您可以轻松添加另一个案例而不会搞砸。但我无法让它工作......
我更喜欢这个答案，而不是选择的“最佳”答案。 Switch 语句比写出条件语句要干净得多。
@MattMartin 这可能是因为您需要在每个案例的末尾添加break;。这就是我的case..lol

【解决方案3】：

下面的内容会有所帮助吗？基于其他答案，只需做

console.log(window.location)

，您可以丰富与您的位置对象相关的信息

     if(window.location.href=== "root.com/technology") {
         $("#main").addClass("tech");
     }

【讨论】：

【解决方案4】：

使用location 内置对象来确定完整的 URL 或其中的某些部分。

【讨论】：

显然这是正确的，但它并不能完全回答我的如何这样做的问题。

【解决方案5】：

      $(function(){
        var cUrl = window.location.href;
         $(".product-type-swatches__list a").each(function(){
                 if ($(this).attr("href") == cUrl){
                         $(this).addClass("is-selected");
                 }
         });
    });

【讨论】：