将活动类添加到选定页面（带和不带斜杠）

Question

我有一个选择器，它将“活动”类添加到所选页面。 然而，它只能与斜杠一起使用，例如如果是：

Site.com/TEST/ 它工作正常。

但是，如果它的 Site.com/TEST 没有。

这在使用“返回”按钮时会导致问题，因为它会将我带回页面但没有尾随“/”

这是我的代码：

$(document).ready(function () {
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

有人可以修改它以将类添加到两种变体中吗？ 另外，如果可能的话，如果我选择父级的子页面，是否可以对其进行修改，以便将活动类添加到父级？

例如Site.com/Test/Edit 我想将测试设置为活动状态。

谢谢

Answer 1

str.replace(/\/+$/,'') + '/' 将始终确保字符串以 / 结尾，因此您的代码将如下所示：

$(document).ready(function () {
    str = this.location.pathname.replace(/\/+$/,'') + '/';
    $('a[href="' + str + '"]').parent().addClass('active');
});

如果您不知道是否所有链接都以斜线结尾，那么您可以检查所有内容：

$(document).ready(function () {
    str1 = this.location.pathname.replace(/\/+$/,'') + '/';
    str2 = this.location.pathname.replace(/\/+$/,'');
    $('a[href="' + str1 + '"], a[href="' + str2 + '"]').parent().addClass('active');
});

编辑

让我们尝试选择所有父链接：

var tmp = this.location.pathname.replace(/.*?:\/\//g, "").replace(/\/+$/,'');
arr = tmp.split('/');
while(arr.length > 1) {
  tmp = 'http://' + arr.join('/');
  $('a[href="' + tmp + '"], a[href="' + tmp + '/"]').parent().addClass('active');
  arr = arr.slice(0,-1);
}

基本上我从开头删除http:// 并将字符串拆分为每个/ 上的数组元素。然后我将一个一个地删除结束元素，再次粘合并相应地构造选择器。

这是在行动，它是如何生成链接的：

$('#test').click(function(){
  
  // I replaced the string with the input value for testing
  var tmp = $('input').val().replace(/.*?:\/\//g, "").replace(/\/+$/,'');
  arr = tmp.split('/');
  
  // Clearing the output here
  $('div').html('');
  while(arr.length > 1) {
    tmp = 'http://' + arr.join('/');
    
    // Appending the current result
    $('div').append('<p>' + tmp + '/</p>');
    $('a[href="' + tmp + '"], a[href="' + tmp + '/"]').parent().addClass('active');
    arr = arr.slice(0,-1);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input value="http://google.com/sub1/sub2">
<button id="test">test</button>
<div></div>