Vanilla JavaScript getAttribute("href") 来自与内部图像的链接

Question

我正在尝试使用原生 JavaScript 创建选项卡，每个选项卡在链接内都有一个图标和一个标题

<div class="tabs-bar-item">
  <a href="#tab3">
    <img class="icon" src="img/school.png">
    <h3 class="title">Instruktāžas datu aizsardzībā</h3>
  </a>
</div>

它应该打开标签内容

<div id="tab3" class="tabs-content-item">

问题是当我在链接中有<img> 和<h3> 元素时，.getAttribute("href"); 返回 null。 如果我将标签更改为

，一切正常

<div class="tabs-bar-item">
    <img class="icon" src="img/school.png">
    <a href="#tab3">Instruktāžas datu aizsardzībā</a>
</div>

但我希望在单击.tabs-bar-item 的任意位置时打开选项卡内容。如何在 vanilla JavaScript 中完成？

完整的JS代码：

let tabs = document.querySelectorAll('.tabs-bar .tabs-bar-item');

    function tabClicks(tabClickEvent) {
        for (let i = 0; i < tabs.length; i++) {
            tabs[i].classList.remove("active");
        }

        let clickedTab = tabClickEvent.currentTarget; 

        clickedTab.classList.add("active");
        tabClickEvent.preventDefault();

        let contentPanes = document.querySelectorAll('.tabs-content-item');

        for (i = 0; i < contentPanes.length; i++) {
            contentPanes[i].classList.remove("active");
        }

        let anchorReference = tabClickEvent.target;
        let activePaneId = anchorReference.getAttribute("href");
        let activePane = document.querySelector(activePaneId);

        activePane.classList.add("active");
    }

    for (i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener("click", tabClicks)
    }

标签内容的CSS：

.tabs-content .tabs-content-item {
    display: none;
}
.tabs-content .tabs-content-item.active {
    display: block;
}

Answer 1

Element.closest 搜索 DOM 以找到与作为参数传递的选择器匹配的元素。如果Element 已经与选择器匹配，则返回Element（调用closest 的节点）。

因此尝试改变

 let anchorReference = tabClickEvent.target;

到

 let anchorReference = tabClickEvent.target.closest('a');

例如

let tabs = document.querySelectorAll('.tabs-bar .tabs-bar-item');

function tabClicks(tabClickEvent) {
    for (let i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove("active");
    }

    let clickedTab = tabClickEvent.currentTarget;

    clickedTab.classList.add("active");
    tabClickEvent.preventDefault();

    let contentPanes = document.querySelectorAll('.tabs-content-item');

    for (i = 0; i < contentPanes.length; i++) {
        contentPanes[i].classList.remove("active");
    }

    let anchorReference = tabClickEvent.target.closest('a');
    console.log( anchorReference);
    let activePaneId = anchorReference.getAttribute("href");
    let activePane = document.querySelector(activePaneId);

    activePane.classList.add("active");
}


for (i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener("click", tabClicks)
}

.tabs-content .tabs-content-item {
    display: none;
}
.tabs-content .tabs-content-item.active {
    display: block;
}

<div class="tabs-bar">
  <div class="tabs-bar-item">
    <a href="#tab3">
      <img class="icon" src="img/school.png">
      <h3 class="title">Instruktāžas datu aizsardzībā</h3>
    </a>
  </div>
</div>
<div class=tabs-content>
  <div id="tab3" class="tabs-content-item">
     content of tab3 with self contained link: <a id="here" href="#here">here</a>. Clicking "here" should not close the tab!
  </div>
</div>  

Answer 2

首先：您可以使用 the :target pseudo-class 在纯 CSS 中执行此操作，无需 JS。

.tabs-content .tabs-content-item {
    display: none;
}
.tabs-content .tabs-content-item:target {
    display: block;
}

在不久的将来，您还可以使用the :local-link pseudo-class为当前打开的标签页设置标签页链接的样式。

在您的代码中，tabClickEvent.currentTarget 始终指代您将侦听器附加到的 DIV 元素。该元素没有href。有多种方法可以解决这个问题。完全删除 DIV 将是一个好的开始，然后您可以将侦听器附加到链接，或创建一个全局侦听器来检查是否已单击链接或其后代（使用 element.closest('a')）。

无论哪种方式，使用 JavaScript 正确实现导航并不像您想象的那么容易（这也是纯 CSS 解决方案好的原因）。例如，如果用户想要在新的（浏览器）选项卡中打开链接，您必须添加一些代码以在加载时读取页面的片段并在没有用户交互的情况下打开正确的选项卡。