从数组

Question

我正在尝试创建this tutorial中的一些标签。我可以显示硬编码选项卡没有问题但是当我尝试从列表中填充选项卡时，它们显示不正确。

下面的代码和图片。

tabsv2.html

<template>

    <!--Not Working-->
    <ul class="tab" repeat.for="name of collection">
        <li><a href="#" id="${name}" class="tablinks" click.delegate="openTab($event, name)">${name}</a></li>
    </ul>

    <div repeat.for="name of collection">
        <div id="${name}" class="tabcontent">
            <h3>${name}</h3>
            <p>${name} is a capital city. </p>
        </div>
    </div>


    </br></br>

    <!--Working-->
    <ul class="tab">
        <li><a href="#" class="tablinks" click.delegate="openTab($event, 'London1')">London</a></li>
        <li><a href="#" class="tablinks" click.delegate="openTab($event, 'Paris1')">Paris</a></li>
        <li><a href="#" class="tablinks" click.delegate="openTab($event, 'Tokyo1')">Tokyo</a></li>
    </ul>

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

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

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

tabsv2.js

export class tabsv2 {

    collection = ["London", "Dublin", "Paris"];


    openTab(evt, cityName) {
        // Declare all variables
        var i, tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        console.log("Display place:");
        console.log(cityName);

        // Show the current tab, and add an "active" class to the link that opened the tab
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
}

从数组填充的第一组选项卡垂直显示且无法点击。硬编码的正确显示。

有人知道可能导致这种情况的原因吗？

更新

正如法比奥建议的那样，我移动了repeat.for所以看起来像这样：

<ul class="tab">
    <li repeat.for="name of collection"><a href="#" id="${name}" class="tablinks" click.delegate="openTab($event, name)">${name}</a></li>
</ul>

<div repeat.for="name of collection">
    <div id="${name}" class="tabcontent">
        <h3>${name}</h3>
        <p>${name} is a capital city. </p>
    </div>
</div>

标签水平正确显示，但点击时仍然不展开：

Answer 1

我的代码中有错误：

<a href="#" id="${name}" class="tablinks" click.delegate="openTab($event, name)">${name}</a>

应该是：

<a href="#" class="tablinks" click.delegate="openTab($event, name)">${name}</a>