Сопоставление тега привязки с определенным href

#javascript #jquery #css-selectors

#javascript #jquery #css-селекторы

Вопрос:

У меня есть панель инструментов с боковой панелью с навигационными ссылками, где я выделяю каждую ссылку сбоку, как только вы переходите по ссылке. Я сопоставляю ссылку, делая это

 $(function() {
    var item = $('.sidebar-menu a[href="'   location.href   '"]');

    item.parent().addClass('active');
});
  

Но проблема в том, что если вы добавляете хэш (#) к адресу, то он больше не соответствует ссылке. И я хочу, чтобы он соответствовал ему независимо.

В настоящее время он будет соответствовать:

  • mysite.com/students/companies

Но он не будет соответствовать:

  • mysite.com/students/companies#
  • mysite.com/students/companies/subpage

Я хочу, чтобы он соответствовал всему, что включает «mysite.com/students/companies «

Ответ №1:

Я думаю, у вас проблема, потому что ваш тег привязки выглядит примерно так:

 <a href='somethingelse.php'>Something Else</a>
  

Я заметил, что вы вызываете родительский div так .. вы переносите свой тег привязки на div или ul, li или что-то еще..

Что вы можете сделать, просто добавив некоторые дополнительные данные, такие как ‘data-user =» so <div data-user='companies'><a href='somethingelse.php'>Something Else</a></div>

Итак, теперь, если кто-то будет внутри компаний или что-то еще, просто сделайте трюк:

 var url_string = window.location.href;
var url = url_string.split('/')
var item = $('div[data-user=' url[3] ']).addClass('active');
  

Это будет работать для веб-страницы, которая выглядит следующим образом:
www.some.com/companies
и
www.some.com/companies/sometihng
даже
www.some.com/companies/sometihng/more

Ответ №2:

Попробуйте с

 $('.sidebar-menu a').filter(function() {
  return location.href.indexOf(this.href)!=-1;
}).parent().addClass('active');

var item = $('.sidebar-menu a[href*="'   location.pathname   '"]');
  

Комментарии:

1. Но что, если путь будет «/students/companies/somethingelse»? Я хочу, чтобы «/ students / companies» соответствовали ему

2. По-прежнему соответствует только для «/ students /companies /»

3. Я изменил this.href.indexOf(location.pathname) location.href.indexOf(this.href) , и это сработало