Question

如果网址结束：?style=product我想将active类添加到li，类product

HTML：

<ul id="menulist">
  <li class="product">Product</li>
  <li class="product2">Product 2</li>
  <li class="product3">Product 3</li>
</ul>

Answer 1

你应该和Andy一起去渲染这个服务器端，但是为了回答你的问题，你应该做些什么来实现javascript / jQuery中的相同（如果没有服务器端）

如果你可以对url进行很多假设（它将始终具有该查询字符串，它始终是第一个），那么获取'style'查询字符串肯定更容易。 querystring，永远不会有任何其他查询字符串，在查询字符串之后永远不会有任何 hash 数据...）。如果你不能做出这样的假设，下面可能是最安全的方法。

var activeStyle = '';

if(window.location.search != '') {
   // find querystring section or url
   var query = window.location.search.substring(1);

   // split querystring into key/value-pairs
   query = query.split('&');

   for(var i = 0; i < query.length; i++) {

       // split key/value pair into key and value
       var keyvalue = query[i].split('=');

       // find value of ?style=
       if(keyvalue[0].toLowerCase() == 'style')) {
          activeStyle = keyvalue[1];
          break;
       }
   }
}

if(activeStyle != '') {
   $('li.' + activeStyle).addClass('active');
}

请注意，如果您的网址以product2结尾，我认为您还希望active成为style=product2。如果您仅想要在选择product时应用此效果，则必须将最后一个条件调整为

if(activeStyle.toLowerCase() == 'product') {
    $('li.product').addClass('active');
}

修改

编辑上述选项以使用window.location.search来接受Andy的建议，以防范location.hash。

Answer 2

首先你需要一个类似于发布here的javascript函数，这样你就可以从查询字符串中获取样式变量。

一旦你尝试了类似的东西：

var style = getParameterByName('style');
$('li.' + style).addClass('active');

Answer 3

function getStyleValue(uri)
{
    var var, hash;
    var hashes = uri.slice(uri.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        if(hash[0] == 'style')
        {
            return hash[2];
        }
    }
    return false;
}

然后你可以使用像

var selected = getStyleValue('index.php?style=product2') || "product";
$('a.' + selected).addClass('selected');

Answer 4

你可以像这样在jQuery中获取当前的url：

$(location).attr('href');

然后切断'？'后的所有内容使用正则表达式来获取当前页面

要将类添加到正确的li项：

$('li.'+style+').addClass('active');

Answer 5

var style = '<?php echo $_GET['style'] ?>';
if(style == 'product'){
    $('li.product').addClass('active');
}

Answer 6

使用location.href读取查询参数......

   function getQuerystring(key, default_)  {
      if (default_==null) default_="";
      key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
      var qs = regex.exec(window.location.href);
      if(qs == null)
        return default_;
      else
        return qs[1];
    }

    var target = $("." + getQueryString("style", "default"));

根据URL设置活动链接

6 个答案: