Question

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

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

Answer 1

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

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

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

Answer 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的含义。

Answer 3

使用location内置对象来确定完整的网址或其中的部分内容。

Answer 4

下面会有什么帮助吗？根据其他答案，只需做

的console.log（window.location的）

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

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

Answer 5

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

jQuery基于页面URL添加类

5 个答案: