Javascript 获取活跃的 li href 名称

Question

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

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

我想捕获这是一个使用 javascript 的 JS 变量。谁能帮我解决这个问题。

我使用了下面的代码，但没有成功

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>

我稍微修改了你 <a> 的 href 否则结果将毫无意义。

Answer 2

因为这是用 google-tag-manager 标记的，所以您不应该自己编写自定义 Javascript（GTM 已经包含 select 或引擎）。

转到新变量，select“DOM 元素”，将选择方法下拉列表切换到“CSS 选择器”，输入 select 或从评论或答案（或“属性包含”select 或如 li[class*="active"]>a 如果您不是特别在 uk-active 之后，而是所有活动链接） .

这将 return selected 元素的内部文本属性，或者，如果你想要一个属性值，你可以在相应的文本中输入属性的名称领域：

Javascript 获取活跃的 li href 名称

Javascript to get the active li href name

javascript

google-tag-manager