获取 url 路径并在 li 上添加活动类

Question

我尝试获取 url 路径，然后在 li 上添加活动类 例子： www.mysite.com/?p=xxxx

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

但什么也没发生。我做错了什么？

Answer 1

这行得通！

$(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");

        }

    });

});

Answer 2

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

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

这将获得 href 属性以pid 结尾的链接（在本例中为 1885）。

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

Answer 3

如何更改类名并使用 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。