如何避免将内联 JavaScript 用于可点击的选项卡？

Question

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

<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 个解决方案

解决方案1
2 已采纳 2018-08-20 23:28:41

如何避免将内联 JavaScript 用于可点击的选项卡？

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-08-20 23:28:41

解决方案1
2 已采纳 2018-08-20 23:28:41