获取活动li href名称的JavaScript

Question

我需要在页面上选择的选项卡上获取活动

的href名称。 As shown in the code below, since "href: popular" is active, I want that to be returned

我想用JavaScript捕获这是一个JS variabe。谁能帮我这个忙。

我使用了以下代码，但没有运气

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

Answer 1

以下是@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>进行了一些修改，否则结果将毫无意义。

Answer 2

由于这是用google-tag-manager标记的，因此您不应该自己编写自定义Javascript（GTM已经包含选择器引擎）。

转到变量，新建，选择“ DOM元素”，将“选择方法”下拉列表切换为“ CSS选择器”，从注释或答案中输入选择器（或“属性包含”选择器，例如li [class * =“主动”]> a，如果您不是在uk主动之后，而是所有主动链接）。

这将返回所选元素的innertext属性，或者，如果需要属性值，则可以在相应的文本字段中输入属性的名称：