Question

使用列表进行导航，我正在寻找一种干净的方式来应用所选的＆＃39;如果页面URL（减去路径后面的任何内容）与列表项的href匹配（减去路径后面的任何内容），则为类列表项。

示例：

<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

申请课程＆＃34;选择＆＃34;当页面URL包含href的 / p / clothing / dresses / N-10635 部分时，列表项。

到目前为止，我使用以下方法取得了部分成果：

$('.leftNav li a').each(function(){
    if(window.location.href == this.href){
        $(this).parents('li').addClass('selected');
    }
});

<ul class="leftNav">
<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>
<li><a href="/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris">capris</a></li>
</ul>

然而，仅应用了所选的＆＃39;当URL与href完全匹配时的类 - 意味着它必须包含href中的链接跟踪变量（即：?ab=leftNav:dresses）。思考如何匹配＆＃34; base＆＃34;网址＆href＆＃39; s，我尝试将数据属性添加到列表项以仅匹配路径：

$('.leftNav li').each(function(){
    if(window.location.href == (this).data('left-nav-href')){
        $(this).addClass('selected');
    }
});

<ul class="leftNav">
<li data-left-nav-href="/p/clothing/dresses/N-10635"><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>
<li data-left-nav-href="/p/clothing/bottoms/capris/N-10764"><a href="/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris">capris</a></li>
</ul>

我尝试使用window.location的变体，包括：window.location.href，window.location.href.pathname，window.location.href.indexOf，window.location.href.startsWith。由于这不起作用，我搜索了一种方法来匹配URL和href的路径，无论其他参数或变量如何，但我能找到的方法是匹配URL和href的具体使用字符串或参数。我发现只能匹配部分URL或href的所有实例都使用＆＃34; split＆＃34; RegEx引入了另一种复杂程度，我不认为我的使用需要。我错过了一个更简单的解决方案吗？

Answer 1

您可以使用indexOf()

$(document).ready(function () {
    $('.leftNav li a').each(function(){
        var ThisHref = ($(this).attr('href').split('?'))[0];
        if(window.location.href.indexOf(ThisHref) > -1) {
            $(this).closest('li').addClass('selected');
        }
   });
});

示例

＆＃13;
＆＃13;
var url = "http://www.website.com/index/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris"; $(document).ready(function () { $('.leftNav li a').each(function(){ var ThisHref = ($(this).attr('href').split('?'))[0]; //alert(ThisHref); if(url.indexOf(ThisHref) > -1) { $(this).closest('li').addClass('selected'); } }); });
＆＃13;
.selected{ background : red; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="leftNav"> <li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li> <li><a href="/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris">capris</a></li> </ul>
＆＃13;
＆＃13;
＆＃13;

<强>解释：

$(document).ready(function () { // run the code after document is ready $('.leftNav li a').each(function(){ // loop through <a> on <li> // $(this).attr('href') will return href as string .. in your case will return something like '/p/clothing/dresses/N-10635?ab=leftNav:dresses' // using .split('?') to separating this href string by '?' // [0] get the first string after split (in this case it will be '/p/clothing/dresses/N-10635') // combine all of those steps on just one line var ThisHref = ($(this).attr('href').split('?'))[0]; // get the 'window.location.href' which is return your url ..something like 'http://www.website.com/index/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris' // try to find (first string after split) into (url/window.location.href) if(window.location.href.indexOf(ThisHref) > -1) { // if the url contains the first string after split addClass $(this).closest('li').addClass('selected'); } }); });

您可以阅读.split() here

注意：在Vinas回答中，他使用this.href将href返回为 string ..在你的情况下将返回类似的东西＆＃39; / P /服装/礼服/ N-10635 AB = leftNav：礼服＆＃39;他用了 location.pathname 以及indexOf()的代码，他试图找到location.pathname 进入href

其他：在您的情况下我的答案和Vinas答案都可以。这取决于你的情况以及你正在尝试做的事情，这不依赖于代码。像.hide(0) , .slideUp(0) , fadeOut(0)之类的所有这些都隐藏了具有相同效果的元素。所以代码始终由你正在使用的案例..可能是我的代码，甚至Vinas的代码也没有在另一个案件上工作

Answer 2

我想如果你保持你的html

<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

但将比较符改为：

$('.leftNav li a').each(function(){
    if (this.href.indexOf(location.pathname) > -1) {
        $(this).parents('li').addClass('selected');
    }
});

你能得到你所需要的东西！

＆＃34; if＆＃34;上面将检查给定路径是否包含在item＆＃39; s href属性中。

因此，如果您的网址是＆＃34; http://www.yourhost.com/p/clothing/dresses/N-10635?param=value＆＃34;，则应找到它的路径（/ p / clothing / dresses / N-10635），并输出给出的例子是：

<li class="selected"><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

我希望这有帮助！ =）

Answer 3

假设没有'？'实际路径中的字符，您可以使用这样的位置和href：

ImageView

如何在jQuery中匹配URL与href？

3 个答案: