如何避免將內聯 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