获取URL路径，并添加类活动的李

我试图抓住的URL路径，然后对李加活动类例如： www.mysite.com/?p=xxxx获取URL路径，并添加类活动的李

的x将取决于改变其中，用户点击链接

我尝试这样做：

<ul class="top_menu"> 
<li class="tider"><a href="/?p=1884">Åbningstider</a></li> 
<li class="butikker"><a href="/?p=1885">Butikker</a></li> 
<li class="sker"><a href="/?p=1886">Det sker</a></li> 
<li class="nyhedsbrev"><a href="/?p=1887">Nyhedsbrev</a></li> 
<li class="vej"><a href="/?p=1888">Find vej</a></li> 
</ul> 

var text = window.location.href.match(/http:\/\/www\.mysite\.com\/(.+)/)[1].replace(/_/g,' '); 
$("#nav li").filter(function() { 
    return $.text([this]) == text; 
}).addClass("active");

但没有任何反应。我即将做错了什么？

来源

2012-08-02 Kasper

请发表您的HTML – Thomas 2012-08-02 07:43:00

首先你可以只使用window.location.search，跳过正则表达式部分 – 2012-08-02 07:43:36

This Works！

$(document).ready(function(){ 

    var full_path = location.href.split("#")[0]; 

    $(".top_menu li a").each(function(){ 

     var $this = $(this); 

     if($this.prop("href").split("#")[0] == full_path) { 

      $(this).parent().addClass("active"); 

     } 

    }); 

});

来源

2012-08-03 06:29:43 Kasper

您可以使用ends with属性选择：

var pid = '1885'; //Get the current value of p 
$('#nav li a[href$="'+pid+'"]').parent().addClass('active');

在href属性中pid结束（在此情况下，1885年），这将让该链接。

如果您有两个以相同字符串结尾的值（如p=1885和p=11885），则会导致问题。

来源

2012-08-02 07:57:51 Thomas

你能解释更多LITTEL位？我不熟练jq – Kasper 2012-08-02 10:39:24

那么我将不得不为每个链接做一个？ – Kasper 2012-08-02 11:57:54

不，只有一次，但您必须将第一行替换为“p”的当前值。我建议使用'document.location.search'并运行一个正则表达式。 – Thomas 2012-08-02 12:31:49

有关更改类名和使用PHP和jQuery什么：

<?php 

if(isset($_GET['p'])) { 

    echo '<script type="text/javascript"> 
    $(document).ready(function(){'; 

    $from_url = $_GET['p']; 

    echo ' 
    $(\'p_' . $from_url . '\').addClass(\'active\'); 
     }); 
    </script>'; 
    } 

?>

例如，在 “www.mysite.com/?p=1888” 上面会打印：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.p_1888').addClass('active'); 
    }); 
</script>

它将为类名称为“p_1888”的HTML添加类为“活动”的类。例如：

<li class="p_1888"><a href="/?p=1888">Find vej</a></li>

也解释here。

来源

2012-08-02 08:03:09

好主意，但网站是用aspx编写的。而且我没有aspx的经验 – Kasper 2012-08-02 10:38:20

获取URL路径，并添加类活动的李

回答

相关问题