设置活动链接基于URL

如果URL结尾：?style=product我想一类active添加到li与类的product设置活动链接基于URL

HTML：

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

来源

2010-08-16 CLiown

当你的HTML输出时，你最好做这个服务器端。 – 2010-08-16 14:49:44

你或许应该安迪去并提供这个服务器端，但回答你的问题，这是你应该做的，以达到在JavaScript/jQuery相同（如果没有服务器端）

肯定有更容易的方法来获得'样式'查询字符串，如果你可以做出很多关于网址的假设（它总是会有这个查询字符串，它始终是查询字符串，它永远不会有任何其他查询字符串，永远不会有任何散列查询字符串后的数据...）。如果你不能作出这样的假设，下面可能是最安全的方式。

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而是拿起根据安迪的建议，其中警卫location.hash。

来源

2010-08-16 14:49:53

嗯，更好的答案，然后我的猜测，upvote for you！ – Rakward 2010-08-16 14:52:24

不要忘记，你可以使用* window.location。搜索*只获得URL的查询字符串部分，那么你不必担心哈希:-) – 2010-08-16 14:54:00

@Andy：很好！这样更好，因为我原来的代码并不十分担心哈希值。编辑 – 2010-08-16 15:00:00

你可以得到当前的URL中的jQuery这样的：

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

后，再切断一切“？用正则表达式，得到侑当前页面

一类添加到正确的李项：

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

来源

2010-08-16 14:50:52 Rakward

首先登场的，您需要一个JavaScript函数类似一个贴here，这将允许你从查询字符串中获取样式变量。

一旦你有试着这么做：

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

来源

2010-08-16 14:51:24 simnom

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

来源

2010-08-16 14:51:27

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');

来源

2010-08-16 14:52:53 RobertPitt

使用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"));

来源

2010-08-16 14:53:03 user409021

设置活动链接基于URL

回答

相关问题