Question

我需要创建一些选项卡，以在单击时显示内容。尽管我想避免使用内联JavaScript来调用openCity（）函数，但我已经从此W3Schools Tutorial找到了一些提供所需功能的代码。在原始代码中，每个选项卡按钮的定义如下：

<button class="tablinks" onclick="openCity(event, 'London')">London</button>

这很好用，但是我更愿意避免在任何代码中使用这样的JavaScript。看起来 event.currentTarget 属性是此处最重要的部分，用于在单击时将 .active 类添加到选项卡，尽管我想知道是否还有另一个进行相同过程的方式。

我尝试了几种不同的解决方案，但仍然找不到最佳的解决方案。在以前的尝试中，由于无法访问未定义值的属性，我遇到了一些错误，例如Uncaught TypeError。现在，不会出现任何错误，但是页面只是停留在第一个选项卡上，其他页面无法正常工作。

在最近的尝试中，我尝试遍历每个选项卡，并添加了一个事件侦听器以分别调用它们，但是使用JavaScript还是一个新手，不确定要做什么。请原谅任何愚蠢的错误！

请在下面找到代码（HTML，CSS和JavaScript）。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial;
        }
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }
        .tab button:hover {
            background-color: #ddd;
        }
        .tab button.active {
            background-color: #ccc;
        }
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }
    </style>
</head>

<body>
    <div class="tab">
    <button class="tablinks">London</button>
    <button class="tablinks">Paris</button>
    <button class="tablinks">Tokyo</button>
</div>

<div id="London" class="tabcontent">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
</div>

<script>
    var i, tabcontent, tablinks;

    tablinks = document.getElementsByClassName("tablinks");
    for (var i = 0; i < tablinks.length; i++) {
        var name = tablinks[i].innerHTML;
        console.log(name);
        tablinks[i].addEventListener('click', openCity(name));
    }
    function openCity(cityName) {
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        this.className += ' active';
        // event.currentTarget.className += " active";
    }
</body>

Answer 1

我不使用数据属性也有其他想法，但是我认为这是正确的方法。
代码可能看起来像这样：

let handleClick = e => {
  Array.from(document.querySelectorAll(".active"), e => e.classList.remove("active")); // remove `active` class from every elements which contains him.
  e.target.classList.add("active");
  document.querySelector(`div.tabcontent[data-id*="${e.target.dataset.id}"]`).classList.add("active");
};

Array.from(document.getElementsByClassName("tablinks"), btn => btn.addEventListener('click', handleClick, false));

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.active {
  display: block;
}

<div class="tab">
  <button class="tablinks" data-id="1">London</button>
  <button class="tablinks" data-id="2">Paris</button>
  <button class="tablinks" data-id="3">Tokyo</button>
</div>

<div data-id="1" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div data-id="2" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div data-id="3" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

如何避免将在线JavaScript用于可点击的标签？

1 个答案: