基于URL的高亮显示

Question

因此，我正在尝试向安莉添加一个类，基于与li中的a标记的href匹配的URL。我当前的代码是向每个li添加一个类，但我需要尝试让它只添加到包含匹配a标记的li。这有什么意义吗？任何帮助都将不胜感激。

我的代码：

<div id="admin-action-menu" class="links">
<div id="cat_settings" class="cat_menu row-fluid">
    <ul   role="menu" >
        <? if (($user->type_id == 1) || ($user->type_id == 2)) { ?>
            <li>
                <div class="icon system-settings">
                </div>
                <div class="action-text">
                    <span>
                        System Settings
                    </span>
                </div>
                <a href="/admin/system_settings"></a>
            </li>
        <? } ?>
        <? if (($user->type_id == 1) || ($user->type_id == 2)) { ?>
            <li>
                <div class="icon email-settings">
                </div>
                <div class="action-text">
                    <span>
                        Email Settings
                    </span>
                </div>
                <a href="/admin/email_settings"></a>
            </li>
        <? } ?>
    </ul>
</div>
<div id="cat_people" class="cat_menu row-fluid">
    <ul  role="menu" >
        <? if ($user->type_id == 1) { ?>
            <li>
                <div class="icon system-admins">
                </div>
                <div class="action-text">
                    <span>
                        System Admins
                    </span>
                </div>
                <a href="/admin/admin_list"></a>
            </li>
        <? } ?>
        <? if ($user->type_id == 1 || $user->type_id == 2) { ?>
            <li>
                <div class="icon company-admins">
                </div>
                <div class="action-text">
                    <span>
                        Company Admins
                    </span>
                </div>
                <a href="/admin/company_admin_list"></a>
            </li>
        <? } ?>
    </ul>
</div>
</div>


<script>

$('.cat_menu li').each(function(){
    var link = $(this).data('href');
    var url = window.location.href;

    if ( link = url ) {
    $(this).addClass('yuuuuup');
    } else {
    $(this).addClass('nooooope');
    }
});
</script>

Answer 1

我想您打算在这里使用==

if ( link = url ) {

Answer 2

这里至少有几个地方是错的。首先，使用$(this).data('href');检索li中锚标记的href。除非您遗漏了相关代码，否则根据您发布的内容，这将不起作用。相反(同样基于您已有的内容)，要获取URL，请执行以下操作：

var link = $('a', $(this)).attr('href');  //Assumes only one anchor is contained within the li

然后，按照您编写代码的方式，您需要检查当前迭代的href是否包含在当前页面的URL中。你可以这样做：

if (url.toLowerCase().indexOf(link.toLowerCase()) != -1){
    $(this).addClass('yuuuuup'); // Match
} else {
    $(this).addClass('nooooope');  //No match
}

当然，您可以修改代码以查看URLS是否匹配，并且有多种方法可以完成您想要做的事情。但这两件事是错的。