javascript - 如何检查url是否包含父页面url？

Question

我想检查当前 url 是否包含父 url 以将“事件”类添加到父列表项链接。

jQuery(function($) {
    var path = window.location.pathname;
    $('ul a').each(function() {
        if (this.pathname.indexOf( path )) {
            $(this).addClass('active');
        }
    });
});

我的 html 看起来像这样:

<ul>
    <li><a class="list-link">Posts</a></li>
    <li><a class="list-link">Blog</a></li>
    <li><a class="list-link">Contact</a></li>
</ul>

当转到 domain.com/contact/email 时，我想保留列表项以保持“事件”类。

Answer 1

如果我正确理解你的问题，你想将 active 类添加到你的 ul 列表中的 anchor 元素，如果 anchor 的文本存在于当前浏览器中小路。

这可以通过以下方式实现(有关详细信息，请参阅片段中的文档):

jQuery(function($) {

    //var path = window.location.pathname;
    var path = 'domain.com/contact/email';
    
    // Convert path to lower case for easier matching
    path = path.toLowerCase();
    
    $('ul a').each(function() {
        
        // Extract link label via text() method. Convert
        // label to lower case for easier matching
        var label = $(this).text().toLowerCase();
        
        // Use indexOf() to check for label existing in
        // path
        if( path.indexOf(label) !== -1 ) {
        
          // Add active class if match found
          $(this).addClass('active');
        }
    });
});

.active {
  background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
    <li><a class="list-link">Posts</a></li>
    <li><a class="list-link">Blog</a></li>
    <li><a class="list-link">Contact</a></li>
</ul>

更新

我使用这段 jQuery 代码找到了我要找的东西:

jQuery(function($) {
    var path = window.location.pathname.split( '/' )[2];
    $('ul a').each(function() {
        if (this.href.indexOf( path ) != -1) {
            $(this).addClass('active');
        }
    });
});