Javascript, чтобы получить активное имя файла href

#javascript #google-tag-manager

Вопрос:

Мне нужно получить имя href активного

на вкладке, выбранной на моей странице. Как показано в приведенном ниже коде, поскольку «href: popular» активен, я хочу, чтобы это было возвращено

Я хочу зафиксировать это как переменную JS с помощью javascript. Кто-нибудь может помочь мне с этим, пожалуйста.

Я использовал приведенный ниже код, но безуспешно

 function() {
  var element=document.querySelector('ul.uk-tab tabs > li');
  var content=element?element.textContent:undefined;
  return content;
}

1. document.querySelector(".uk-active a").getAttribute("href") ?

2. Привет! Совет, чтобы все было удобно здесь: пожалуйста, разместите фактический фрагмент кода в своих вопросах SO, а не ссылки на изображения кода.

Ответ №1:

Поскольку это помечено с помощью Google-tag-manager, вам не следует самостоятельно писать пользовательский Javascript (GTM уже содержит механизм выбора).

Перейдите в переменные, создать, выберите «Элемент DOM», переключите выпадающий список «Метод выбора» на «Селектор CSS», введите селектор из комментариев или ответов (или селектор «attitribute contains», такой как li[class*=»active»]>a, если вам нужны не только ссылки uk-active, но и все активные ссылки).

Это вернет свойство innertext выбранного элемента или, если вам нужно значение атрибута, вы можете ввести имя атрибута в соответствующее текстовое поле:

Ответ №2:

Здесь, в фрагменте, решение, которое @bertdida уже предложил в комментарии выше:

 let el=document.querySelector(".uk-active a"),
    hrefrel=el.getAttribute("href"),
    hrefabs=el.href,
    text=el.textContent;

console.log(`hrefrel: ${hrefrel}nhrefabs:  ${hrefabs}ntext: ${text}`);
// or, combined as an object:
console.log({hrefrel,hrefabs,text})

 <section class="section tabs-container homepage main-container" data-tabs-container-tabifier data-containerid="tabgrp-collections-and-reading" data-getitemcount="2">
  <ul class="uk-tab tabs" data-tabs>
    <li role="tab" aria-expanded="false" class><a href="#firstplace">Latest</a></li>
    <li role="tab" class="uk-active" aria-expanded="true"><a href="#someplace">Popular</a></li>
  </ul>
</section>

Я немного изменил href ваш <a> , так как в противном случае результат был бы довольно бессмысленным.

1. Спасибо. решение @Eike имеет смысл, поскольку используется GTM. Однако я изменил решение Bertida, чтобы получить нужный мне результат. документ. querySelector(«ul.uk-tab.tabs > li.uk-active > a»).outerText.